bootstrap弹出层Modal 模态框

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

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

默认的modal示例：

[html] view plain copy

  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. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  15. <div class="modal-dialog" role="document">
  16. <div class="modal-content">
  17. <div class="modal-header">
  18. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  19. <span aria-hidden="true">×</span>
  20. </button>
  21. <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  22. </div>
  23. <div class="modal-body">
  24. <p>One fine body…</p>
  25. </div>
  26. <div class="modal-footer">
  27. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  28. <button type="button" class="btn btn-primary">Save</button>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  34. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  35. </body>
  36. </html>
  1. 为 .modal 添加 role="dialog"，用于指定模态框为对话框。
  2. 为 .modal-dialog 添加 aria-hidden="true" 属性。
  3. 通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

关闭动画

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

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

[html] view plain copy

  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. <div class="panel panel-default">
  12. <div class="panel-heading">好友列表</div>
  13. <div class="panel-body">
  14. <div class="list-group" role="group" aria-label="好友列表">
  15. <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  16. data-whatever="张三">张三
  17. </button>
  18. <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  19. data-whatever="李四">李四
  20. </button>
  21. <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  22. data-whatever="王二">王二
  23. </button>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  28. <div class="modal-dialog" role="document">
  29. <div class="modal-content">
  30. <div class="modal-header">
  31. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  32. aria-hidden="true">×</span></button>
  33. <h4 class="modal-title" id="exampleModalLabel">New message</h4>
  34. </div>
  35. <div class="modal-body">
  36. <form>
  37. <div class="form-group">
  38. <label for="recipient-name" class="control-label">Recipient:</label>
  39. <input type="text" class="form-control" id="recipient-name">
  40. </div>
  41. <div class="form-group">
  42. <label for="message-text" class="control-label">Message:</label>
  43. <textarea class="form-control" id="message-text"></textarea>
  44. </div>
  45. </form>
  46. </div>
  47. <div class="modal-footer">
  48. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  49. <button type="button" class="btn btn-primary">Send message</button>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  55. <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  56. <script>
  57. $(‘#exampleModal‘).on(‘show.bs.modal‘, function (event) {
  58. var button = $(event.relatedTarget) // 触发事件的按钮
  59. var recipient = button.data(‘whatever‘) // 解析出data-whatever内容
  60. var modal = $(this)
  61. modal.find(‘.modal-title‘).text(‘Message To ‘ + recipient)
  62. modal.find(‘.modal-body input‘).val(recipient)
  63. })
  64. </script>
  65. </body>
  66. </html>

 

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

通过JavaScript调用modal

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

[html] view plain copy

  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。

[html] view plain copy

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

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

[html] view plain copy

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

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

[html] view plain copy

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

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

[html] view plain copy

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

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

[html] view plain copy

  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 从远端的数据源加载完数据之后触发该事件。

如：

[html] view plain copy

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

注：转自博友

原文地址：https://www.cnblogs.com/BARNEYROSS/p/9141521.html

时间： 2024-08-02 10:48:58

bootstrap弹出层Modal 模态框的相关文章

sweetalert2 全面替代 alert ，从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框

1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 原文地址:https://www.cnblogs.com/zhourongcode/p/9297386.html

anjularjs弹出model（模态框）

$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 resolve:定义一个成员并将他传递给$modal指

制作一个有模态的弹出层

参考慕课网课程<分享:阿当大话西游之WEB组件> 定制不同的皮肤可通过对元素添加或减少class类来实现. 首先,模态是指如下图部分的灰色背景部分:(灰色部分不可点击) 然后,要记住,模态要加在当前页面的上面,以及当前操作框(通常是一个弹出层)的下面 所谓上面,下面是指: 如果模态(通常是一个div)的定位是fixed(固定定位)的,那么它将不占据文档空间, 所以,将其height和width设置为100%,另外,设置left:0;top:0.即为铺满整个屏幕. 然后,在html中,处于此di

jQuery 插件开发——PopupLayer(弹出层)

导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时间的工作概要吧. 就我在开发过程中的理解和开发的经验,一般常用的弹出层有三类(其实还有一类就是弹出可以输入内容的,但是这种可以被替代,所以就特别拿出来写了):Confirm.Alert.LoadContent(url).其中Alert又可以分成五种(当然也可以是四种),分别是: "error&quo

Bootstrap 模态框(也可以说的弹出层)

最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html页面的写法如下: <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <script src="bootstrap/js/j

bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); 这个是国内同学的解决方法: http://www.oschina.net/question/226830_143869 //显示modal $('#m

jQuery点击弹出层，弹出模态框，点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

Js实例——模态框弹出层

1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> <head> <title>模态框弹出层.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-

ASP.NET—013：实现带控件的弹出层（弹出框）

在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法showModalDialog("新页面相对路径+?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页.而在有些时候,仅仅是显示一些单一的.少量的数据,或者一些简单的操作时.就没必要使用新弹出页面了.此时,最好使用弹出层,也就是数据还是显示在当前页面的某个控件上,然后通过JS方法实现达到弹出的目的.看下面的例子: <html xmlns="http: