<!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. sqlachemy 使用实例

    sqlachemy 是python中关于sql的ORM,他的存在可以消除底层sql引擎的差异,同事也避免了复杂繁琐的sql语句,因此我们在比较大的应用时常使用它,下面是我写的一个例子 #!/usr/b ...

  2. Microsoft.Practices.Unity 给不同的对象注入不同的Logger

    场景:我们做项目的时候常常会引用第三方日志框架来帮助我们记录日志,日志组件的用途主要是审计.跟踪.和调试.就说我最常用的日志组件log4net吧,这个在.NET同行当中应该算是用得非常多的一个日志组件 ...

  3. hdu Big Number

    #include <cstdio> #include <cstring> #include <cmath> using namespace std; int mai ...

  4. CONTEST45 呵呵呵呵呵

    题目质量差评!为什么不给数据范围! A.乘积最大3 题目:http://dev.luogu.org/problem/show?pid=2172 题解:sb题,均值定理. 代码: #include< ...

  5. 【转】预装(push)lib64中so文件查找错误

    原文网址:http://blog.csdn.net/caroline_wendy/article/details/43615361 Android系统已经升级为64位系统,在进行预装(adb push ...

  6. POJ1845 数论 二分快速取余

    大致题意: 求A^B的所有约数(即因子)之和,并对其取模 9901再输出. 解题思路: 应用定理主要有三个: (1)   整数的唯一分解定理: 任意正整数都有且只有一种方式写出其素因子的乘积表达式. ...

  7. TCP头分析+面试题

    一.测试程序 我们先用python来写两个测试脚本,非常简单,看代码: 服务端: from socket import * def accept(): sock = socket(AF_INET, S ...

  8. 关于bootstrap--表格（tr的各种样式）

    只需要<tr class="active">就可以用active样式. 特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bo ...

  9. Linux是如何启动的

    今天早上在上操作系统课的时候,老师有提到计算机从按下开关键到最后由操作系统全然接管的整个过程. 只是讲课毕竟是十分抽象的,由于之前自己也看过这方面的内容,可是老是记不住,所以今天晚上就花了点时间,把& ...

  10. Unity发送短信

    闲来无事,觉得用uinity来发送短信挺有意思的,所以自己差了点资料,看看能否实现,结果还真的可以!废话不多说,直接码! 1,新建一空工程,我们就简单的使用UGUI搭建一个丑陋的界面吧! 2,界面极其 ...