bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。

务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。

默认的modal示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap Modal</title>
  8.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  12.     Launch demo modal
  13. </button>
  14.  
  15. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  16.     <div class="modal-dialog" role="document">
  17.         <div class="modal-content">
  18.             <div class="modal-header">
  19.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  20.                     <span aria-hidden="true">×</span>
  21.                 </button>
  22.                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  23.             </div>
  24.             <div class="modal-body">
  25.                 <p>One fine body…</p>
  26.             </div>
  27.             <div class="modal-footer">
  28.                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  29.                 <button type="button" class="btn btn-primary">Save</button>
  30.             </div>
  31.         </div>
  32.     </div>
  33. </div>
  34.  
  35. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  36. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  37. </body>
  38. </html>
  1. 为 .modal 添加 role="dialog"，用于指定模态框为对话框。
  2. 为 .modal-dialog 添加 aria-hidden="true" 属性。
  3. 通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

关闭动画

如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。

通过按钮属性显示不同内容
当有一堆按钮，都要触发相同的模态框(如：向好友列表中某个人发消息)，只是有用户ID不同，那么可以使用data-whatever配合event.relatedtarget来实现：

relatedTarget 事件属性可关注：http://www.w3school.com.cn/jsref/event_relatedtarget.asp

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap Modal</title>
  8.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. </head>
  10. <body>
  11.  
  12. <div class="panel panel-default">
  13.     <div class="panel-heading">好友列表</div>
  14.     <div class="panel-body">
  15.         <div class="list-group" role="group" aria-label="好友列表">
  16.             <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  17.                     data-whatever="张三">张三
  18.             </button>
  19.             <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  20.                     data-whatever="李四">李四
  21.             </button>
  22.             <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  23.                     data-whatever="王二">王二
  24.             </button>
  25.         </div>
  26.     </div>
  27. </div>
  28.  
  29. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  30.     <div class="modal-dialog" role="document">
  31.         <div class="modal-content">
  32.             <div class="modal-header">
  33.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  34.                         aria-hidden="true">×</span></button>
  35.                 <h4 class="modal-title" id="exampleModalLabel">New message</h4>
  36.             </div>
  37.             <div class="modal-body">
  38.                 <form>
  39.                     <div class="form-group">
  40.                         <label for="recipient-name" class="control-label">Recipient:</label>
  41.                         <input type="text" class="form-control" id="recipient-name">
  42.                     </div>
  43.                     <div class="form-group">
  44.                         <label for="message-text" class="control-label">Message:</label>
  45.                         <textarea class="form-control" id="message-text"></textarea>
  46.                     </div>
  47.                 </form>
  48.             </div>
  49.             <div class="modal-footer">
  50.                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  51.                 <button type="button" class="btn btn-primary">Send message</button>
  52.             </div>
  53.         </div>
  54.     </div>
  55. </div>
  56. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  57. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  58. <script>
  59.     $('#exampleModal').on('show.bs.modal', function (event) {
  60.         var button = $(event.relatedTarget) // 触发事件的按钮
  61.         var recipient = button.data('whatever') // 解析出data-whatever内容
  62.         var modal = $(this)
  63.         modal.find('.modal-title').text('Message To ' + recipient)
  64.         modal.find('.modal-body input').val(recipient)
  65.     })
  66. </script>
  67. </body>
  68. </html>

通常不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。

通过JavaScript调用modal

通常只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：

  1. $('#myModal').modal(options)

JavaScript参数：

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

名称 类型 默认值 描述
backdrop boolean或'static' true 默认情况下，点击其它位置，模态框自动关闭，你可以设置此属性为false或者"static"防止模态框自动关闭
keyboard boolean true 键盘上的 esc 键被按下时关闭模态框。
show path true 模态框初始化之后就立即显示出来。
remote path false 这个参数在v4里会去掉（可以自己写ajax请求来实现）如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

调用示例
1.将页面中的某块内容作为模态框激活。接受可选参数 object。

  1. $('#myModal').modal({
  2.   keyboard: false
  3. })

2.手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。

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

3.手动打开模态框。在模态框显示之前返回到主调函数中 （也就是，在触发 shown.bs.modal 事件之前）。

  1. $('#myModal').modal('show')

4.手动隐藏模态框。在模态框隐藏之前返回到主调函数中 （也就是，在触发 hidden.bs.modal 事件之前）。

  1. $('#myModal').modal('hide')

5.更新模态框，在模态框动态添加或删除内容时：

  1. $('#myModal').modal('handleUpdate')

绑定事件
Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型 描述
show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

如：

  1. $('#myModal').on('hidden.bs.modal', function (e) {
  2.   // do something...
  3. })

Bootstrap学习5--bootstrap中的模态框（modal，弹出层）的更多相关文章

  1. Bootstrap的模态框无法弹出的问题

    今天在使用Bootstrap官网所提供的模态框插件时候发现其中的 可选尺寸模态框 无法弹出 在模态框前使用过其他 Bootstrap的js插件,可以正常使用,说明所需依赖js文件已经正常引用 注意:j ...

  2. Html中模态框（弹出框）使用入门

    作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮         <input class="btn btn-success" i ...

  3. fastadmin模态框（弹出框）

    用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...

  4. 关于bootstrap的modal弹出层嵌套子Modal所引发的血案（转）

    原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...

  5. 求出数组中所有数字的和&&弹出层效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Bootstrap学习笔记（9）--模态框（登录/注册弹框）

    说明: 1. 上来一个ul先把登录和注册两个链接扔进去,ul的类nav,navbar-nav是导航条,navbar-right让他固定在右侧.每个li的里面,data-toggle="mod ...

  7. Vue SPA应用中使用Layer的iframe 弹出层,并且传值

    问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...

  8. Bootstrap.之模态框 显示在遮罩层后面

    Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...

  9. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

随机推荐

  1. Step 2---有关Github的几个问题

    1.取得项目的Git仓库的方式 第一种是在现存的目录下,通过导入所有文件来创建新的 Git 仓库. 要对现有的某个项目开始用 Git 管理,只需到此项目所在的目录,执行: $ git init 初始化 ...

  2. 端口监听与telnet

    例一: 明明端口已经监听了,为什么远程的telnet连接不上. 远程机器 telnet 10.10.1.85 53 就是进不去. Linux 防火墙一关,ok service iptables sto ...

  3. JDK与adb/android环境变量配置完整教程

    在这篇文章中.主要解决一个在Java或者Android开发中第一步须要解决的问题,那就是环境变量的配置.因为这部分在网上有非常多教程.參差不齐.我这里主要是对JDK与adb/android两者的环境变 ...

  4. 【SpringMVC学习03】SpringMVC中注解和非注解方式下的映射器和适配器总结

    从上一篇的springmvc入门中已经看到,springmvc.xml中的配置了映射器和适配器,是使用非注解的方式来配置的,这是非注解方式的一种,这里再复习一下: 1. 非注解方式 1.1 处理器适配 ...

  5. ThinkPad E430C从待机状态恢复后，无线网络就不可用了

    奇妙的问题,ThinkPad E430C从待机状态恢复后.无线网络就不可用了. Windows7系统.按Fn+F8或F7能够调节屏幕亮度,可是F9+Fn也没反应. 把驱动卸载了又一次安装了也无论用,W ...

  6. 压力测试工具集合（ab,webbench,Siege,http_load,Web Application Stress）

    压力测试工具集合(ab,webbench,Siege,http_load,Web Application Stress) 1 Apache附带的工具ab ab的全称是ApacheBench,是Apac ...

  7. Atitit.dart语言的特性  编译时js语言大总结

    Atitit.dart语言的特性  编译时js语言大总结 1. 原型环境1 1.1. Dart可以编译js3 2. 第二个期待的理由是Dart的语言特性,没有什么特别特性好像,类似java c#一小时 ...

  8. Atitit.业务系统的新特性 开发平台 新特性的来源总结

    Atitit.业务系统的新特性 开发平台 新特性的来源总结 1.1. 语言新特性(java c# php js python lisp c++ oc swift ruby  go dart1 1.2. ...

  9. poj 3537 Crosses and Crosses 博弈论之grundy值

    题意: 给1*n的格子,轮流在上面叉叉,最先画得3个连续叉叉的赢.问先手必胜还是必败. 分析: 求状态的grundy值(也就是sg值),详细怎么求详见代码.为什么这么求要自己想的,仅仅可意会(别人都说 ...

  10. Linux下redis安装与使用 (转)

    尊重原创:https://www.cnblogs.com/codersay/p/4301677.html,并更正如下红字 redis官网地址:http://www.redis.io/ 最新版本:2.8 ...