Bootstrap学习笔记-模态框

简介

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集，参考modal。

---

用法

HTML结构

• div[class=modal[fade]][id]
  
  • div[class=modal-dialog[modal-lg|modal-md|modal-sm]]
    
    • div[class=modal-content]
      
      • div[class=modal-header]
        
        • h1/h2/h3/h4/h5/h6[class=modal-title]
      • div[class=modal-body]
      • div[class=modal-footer]

示例：

<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

调用模态框

通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 元素添加 .modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。

通过 data 属性

不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle=”modal” 属性和data-target=”#foo” 属性，以及 href=”#foo” 属性，用于指向被控制的模态框。例如：
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
完整示例参考dynamic-demo.html.

通过 JavaScript 调用

需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：$('#myModal').modal(options)，完整示例参考dynamic-by-javascript-demo.html。modal参数：

• backdrop boolean/’static’ 默认值为true，Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click.
• keyboard boolean 默认值为true，键盘上的 esc 键被按下时关闭模态框。
• show boolean 默认值为true，模态框初始化之后就立即显示出来。
• remote path 默认值为false，如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

modal方法的更多使用方式：

• .modal(options): 将页面中的某块内容作为模态框激活, 接受可选参数 object。
• .modal(‘toggle’): 手动打开或关闭模态框，在模态框显示或隐藏之前返回到主调函数中（触发 shown.bs.modal 或 hidden.bs.modal 事件之前）
• .modal(‘show’): 手动打开模态框, 在模态框显示之前返回到主调函数中（也就是，在触发 shown.bs.modal 事件之前）
• .modal(‘hide’): 手动隐藏模态框, 在模态框隐藏之前返回到主调函数中（也就是，在触发 hidden.bs.modal 事件之前）。
• .modal(‘handleUpdate’): ???

模态框事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码，具体如下所示：

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

简单示例：

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

• 触发窗口打开事件
  $("#id").modal(...) => 执行show.bs.modal事件绑定的回调函数=>执行$("#id").modal(...)之后的代码=>如果有设置remote和loaded.bs.modal事件的监听函数，则执行该函数=>执行shown.bs.modal事件绑定的回调函数
• 触发窗口关闭事件
  $("#id").modal("close")=>执行hide.bs.modal事件绑定的回调函数=>执行$("#id").modal("close")之后的代码=>执行hidden.bs.modal事件绑定的回调函数

参考实例event-demo.html

---

样式

• 可选尺寸
  
  • div.modal-dialog.modal-lg
  • div.modal-dialog.modal-md，默认
  • div.modal-dialog.modal-sm
• 动画
  
  • div.modal.fade
  • div.modal

---

高级配置

• 增强模态框的可访问性
  .modal 添加 role=”dialog” 和 aria-labelledby=”…” 属性，用于指向模态框的标题栏；为 .modal-dialog 添加 aria-hidden=”true” 属性。另外，还应该通过 aria-describedby属性为模态框 .modal 添加描述性信息。示例如下：

<div class="modal fade"