<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 模态框（Modal）插件</title>

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                    &times;

                </button>

                <h4 class="modal-title" id="myModalLabel">

                    模态框（Modal）标题

                </h4>

            </div>

            <div class="modal-body">

                在这里添加一些文本

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                </button>

                <button type="button" class="btn btn-primary">

                    提交更改

                </button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

</html>
或者脚本控制

<script>

    $('#myModal').modal('toggle');

</scirpt>

原文：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-modal

Bootstrap 实例 - 模态框（Modal）插件的更多相关文章

  1. 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  2. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  3. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  4. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  5. Bootstrap多层模态框modal嵌套问题

    一.问题 在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息.此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击 ...

  6. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  9. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

随机推荐

  1. ios晃动检测

    ios晃动检测  第一种 1.在AppDelegate.h中进行如下设置: - (BOOL)application:(UIApplication *)application didFinishLaun ...

  2. (摘)oracle dataguard切换

    众所周知,Data Guard已经是现今标准的主流容灾方案,由于日志传递对于网络适应程度强,且可以采用同步实时的传递方式和异步延迟的传递方式,甚至可以成为远程的异地容灾方案.不管用于何种用途,DG都免 ...

  3. 目测ZIP的压缩率

    对word文件,能压到25% 对PDF文件,却只有90% 对压缩文件本身再压缩,几乎没有效果. 考虑到用户一般情况下只有正常的文档,取中位值66%是比较正常的情况,特别是在预估原文件大小的时候.

  4. CMAKE 生成VS2008静态库工程 与 CMAKE使用，CMakeLists.txt编写总结

    cmake -G"Visual Studio 9 2008 Win64" 以上命令得用cd命令切换到顶层CMakeLists.txt的当前目录,才能生效 以下是CMakeLists ...

  5. STLtoSVG,and SVG to Bmp

    先用这两个工具: Slic3R或者Skeinforge:这个两个工具的作用就是把STL文件切片为叠加的矢量图(SVG格式) 因为SVG是分层的,一层一层的把每层都转换成一张Bmp文件 听说ImageM ...

  6. Cmake编译成静态库

    To build OpenCV as static library you need to set BUILD_SHARED_LIBS flag to false/off: cmake -DBUILD ...

  7. 【转】Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法)

    原文网址:http://www.blogjava.net/anchor110/articles/355699.html 1.在工程下新建lib文件夹,将需要的第三方包拷贝进来.2.将引用的第三方包,添 ...

  8. NOI2012 美食节

    http://www.lydsy.com/JudgeOnline/problem.php?id=2879 费用流. 我们发现,每个厨师做的倒数第k道菜对总等待时间的贡献为k*做这道菜的时间. 将每个厨 ...

  9. POJ2367 Genealogical tree (拓扑排序)

    裸拓扑排序. 拓扑排序 用一个队列实现,先把入度为0的点放入队列.然后考虑不断在图中删除队列中的点,每次删除一个点会产生一些新的入度为0的点.把这些点插入队列. 注意:有向无环图 g[] : g[i] ...

  10. Wince修改系统时间问题

           当我们需要修改到系统时间的时候,需要用到下面四个函数:SetLoaclTime,GetLocalTime,SetSystemTime,GetSystemTime.这四个函数是用来修改或者 ...