Bootstrap学习笔记-模态框

时间：2022-12-28 17:30:18

简介

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集，参考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

.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

.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做了如下处理：

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

问题

  1. 模态框不支持同时打开多个模态框
    千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。参考实例wrong-multi-modal-demo.html和multi-modal-demo.html

  2. 模态框的HTML代码放置的位置
    务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能，参考实例wrong-multi-modal-demo.html。

  3. 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()
})
  1. 嵌入视频
    在模态框中嵌入 YouTube 视频需要增加一些额外的 JavaScript 代码，用于自动停止重放等功能，这些代码并没有在 Bootstrap 中提供。请参考这份发布在 Stack Overflow 上的文章。

Todo

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

相关文章