Bootstrap学习笔记-模态框

来源：互联网发布：直销模式软件编辑：程序博客网时间：2024/06/07 19:57

简介

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集，参考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" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-describedby="this is a modal!">  <div class="modal-dialog" role="document" aria-hidden="true">    <div class="modal-content">      <div class="modal-header">        <h4 class="modal-title" id="myModalLabel">Modal title</h4>      </div>      <div class="modal-body">        ...      </div>      <div class="modal-footer">        ...      </div>    </div>  </div></div>

混合组件

使用栅格系统

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel">  <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" id="gridSystemModalLabel">Modal title</h4>      </div>      <div class="modal-body">        <div class="container-fluid">          <div class="row">            <div class="col-md-4">.col-md-4</div>            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>          </div>          <div class="row">            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>          </div>          <div class="row">            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>          </div>          <div class="row">            <div class="col-sm-9">              Level 1: .col-sm-9              <div class="row">                <div class="col-xs-8 col-sm-6">                  Level 2: .col-xs-8 .col-sm-6                </div>                <div class="col-xs-4 col-sm-6">                  Level 2: .col-xs-4 .col-sm-6                </div>              </div>            </div>          </div>        </div>      </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><!-- /.modal-content -->  </div><!-- /.modal-dialog --></div><!-- /.modal -->

源码分析

CSS源代码

body

.modal-open {  overflow: hidden;}

.modal {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1050;  display: none;  overflow: hidden;  -webkit-overflow-scrolling: touch;  outline: 0;}.modal.fade .modal-dialog {  -webkit-transition: -webkit-transform .3s ease-out;       -o-transition:      -o-transform .3s ease-out;          transition:         transform .3s ease-out;  -webkit-transform: translate(0, -25%);      -ms-transform: translate(0, -25%);       -o-transform: translate(0, -25%);          transform: translate(0, -25%);}.modal.in .modal-dialog {  -webkit-transform: translate(0, 0);      -ms-transform: translate(0, 0);       -o-transform: translate(0, 0);          transform: translate(0, 0);}.modal-open .modal {  overflow-x: hidden;  overflow-y: auto;}

.modal-dialog {  position: relative;  width: auto;  margin: 10px;}

.modal-content {  position: relative;  background-color: #fff;  -webkit-background-clip: padding-box;          background-clip: padding-box;  border: 1px solid #999;  border: 1px solid rgba(0, 0, 0, .2);  border-radius: 6px;  outline: 0;  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}

.modal-backdrop {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1040;  background-color: #000;}.modal-backdrop.fade {  filter: alpha(opacity=0);  opacity: 0;}.modal-backdrop.in {  filter: alpha(opacity=50);  opacity: .5;}

.modal-header {  min-height: 16.42857143px;  padding: 15px;  border-bottom: 1px solid #e5e5e5;}.modal-header .close {  margin-top: -2px;}

.modal-title {  margin: 0;  line-height: 1.42857143;}

.modal-body {  position: relative;  padding: 15px;}

.modal-footer {  padding: 15px;  text-align: right;  border-top: 1px solid #e5e5e5;}.modal-footer .btn + .btn {  margin-bottom: 0;  margin-left: 5px;}.modal-footer .btn-group .btn + .btn {  margin-left: -1px;}.modal-footer .btn-block + .btn-block {  margin-left: 0;}.modal-footer:before,.modal-footer:after {  display: table;  content: " ";}.modal-footer:after {  clear: both;}

响应式

@media (min-width: 768px) {  .modal-dialog {    width: 600px;    margin: 30px auto;  }  .modal-content {    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);  }  .modal-sm {    width: 300px;  }}@media (min-width: 992px) {  .modal-lg {    width: 900px;  }}

其他

.modal-scrollbar-measure {  position: absolute;  top: -9999px;  width: 50px;  height: 50px;  overflow: scroll;}

Javascript源码

略

分析总结

在模态框被打开的时候，bootstrap做了如下处理：

给body元素添加class=modal-open，表示模态框打开
给body添加子元素<div class="modal-backdrop fade in"></div>，用于遮挡底层的元素，且提供一个可点击的区域，点击此区域就即可关闭模态框。
修改.modal元素的display属性，由none设置为block
…

问题

模态框不支持同时打开多个模态框
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。参考实例wrong-multi-modal-demo.html和multi-modal-demo.html
模态框的HTML代码放置的位置
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能，参考实例wrong-multi-modal-demo.html。
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

$('#myModal').on('shown.bs.modal', function () {  $('#myInput').focus()})

嵌入视频
在模态框中嵌入 YouTube 视频需要增加一些额外的 JavaScript 代码，用于自动停止重放等功能，这些代码并没有在 Bootstrap 中提供。请参考这份发布在 Stack Overflow 上的文章。

Todo

bootstrap是如何通过data属性开闭模态框的？
“增强模态框的可访问性 ”是做什么用的？
…

1 1