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" 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

.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

.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

.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

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

modal-title

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

modal-body

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

modal-footer

.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. …

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-11-09 23:51:35

Bootstrap学习笔记-模态框的相关文章

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

Bootstrap Modals（模态框）

http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 在本教程中,将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口.同时,我们也会讨论用于定制的各种可用选项.

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

bootstrap select2使用模态框，搜索框无法输入问题解决

使用模态框,一般都会自动带上一个属性,tabindex="-1",因为这个属性的存在,导致select2的搜索框无法输入,去掉这个属性即可解决 html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序. 把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中. 原文地址:bootstrap select2使用模态框,搜索框无法输入问题解决标签:bootstrap   select2 智能推荐 In MySQL, a