第 13章模态框插件

本节课我们主要学习一下 Bootstrap 中的模态框插件，这是一款交互式网站非常常见的
弹窗功能插件。
一．基本使用
使用模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、
dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为 header(头
部)、body(主体)、footer(注脚)。
//基本实例
<!-- 模态声明，show 表示显示 -->
<div class="modal show" tabindex="-1">
<!-- 窗口声明 -->
<div class="modal-dialog">
<!-- 内容声明 -->
<div class="modal-content">
<!-- 头部 -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span>&times;</span>
</button>
<h4 class="modal-title">会员登录</h4>
</div>
<!-- 主体 -->
<div class="modal-body">
<p>暂时无法登录会员</p>
</div>
<!-- 注脚 -->
<div class="modal-footer">
<button type="button" class="btn btn-default">
注册</button>
<button type="button" class="btn btn-primary">
登录</button>
</div>
</div>
</div>
</div>
如果想让模态框自动隐藏，然后通过点击按钮弹窗，那么需要做如下操作。
//模态框去掉 show，增加一个 id
<div class="modal" id="myModal">
//点击触发模态框显示
<button class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">
点击弹窗
</button>
//弹窗的大小有三种，默认情况下是正常，还有 lg(大)和 sm(小)
<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可设置淡入淡出效果
<div class="modal fade" id="myModal">
//在主体部分使用栅格系统中的流体
<!-- 主体 -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</div>
</div>
</div>
二．用法说明
基本使用介绍结束之后，我们就来看下插件的各种重要用法。所有的插件，都是基于
JavaScript/jQuery 的。那么，就有四个要素：用法、参数、方法和事件。
1.用法
第一种：可以通过 data 属性
//data-toggle
data-toggle="modal" data-target="#myModal"
data-toggle 表示触发类型
data-target 表示触发的节点
如果不是使用<button>，而是<a>，其中 data-target 也可以使用 href="#myModal"
取代。当然，我们建议使用 data-target。除了 data-toggle 和 data-target 两个声明
属性外，还有一些可以用选项。
2.参数
可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。
属性名称 类型 默认值 描述
data-backdrop
布尔值或
'static'
true
默认值 true，表示背景存在黑灰透明
遮罩，且单击空白背景可关闭弹窗；
如果为 false，表示背景不存在黑灰
透明遮罩，且点击空白背景不可关闭
弹窗；
如果是字符串'static'，表示背景存
在黑灰透明遮罩，且点击空白不可关
闭弹窗。
data-keyboard 布尔值 true
如果是 true，按 esc 键会关闭窗口；
如果是 false，按 esc 键会不会关闭。
data-show 布尔值 true
如果是 true，初始化时，默认显示；
如果是 false，初始化时，默认隐藏。
href url 路径 空值
如果值不是以#号开头，则表示一个
url 地址，加载 url 内容到
modal-content 容器里，并只加载一
次。如果是#号，就是取代
data-target 的方法。
//空白背景且点击不关闭
data-backdrop="false"
//按下 esc 不关闭
data-keyboard="false"
//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。
data-show="false"
//加载一次 index.html 到容器内
href="index.html"
当然，也可以在 JavaScript 直接设置。
属性名称 类型 默认值 描述
backdrop
布尔值或
'static'
true
默认值 true，表示背景存在黑灰透明
遮罩，且单击空白背景可关闭弹窗；
如果为 false，表示背景不存在黑灰
透明遮罩，且点击空白背景不可关闭
弹窗；
如果是字符串'static'，表示背景存
在黑灰透明遮罩，且点击空白不可关
闭弹窗。
keyboard 布尔值 true
如果是 true，按 esc 键会关闭窗口；
如果是 false，按 esc 键会不会关闭。
show 布尔值 true
如果是 true，初始化时，默认显示；
如果是 false，初始化时，默认隐藏。
remote url 路径 空值
远程获取指定内容填充到
modal-content 容器内。
//通过 jQuery 方式声明
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html',
});
3.方法
如果说，默认不显示弹窗，那么怎么才能通过点击前后弹窗呢？
参数名称 使用方法 描述
toggle .modal('toggle'); 触发时，反转切换弹窗状态
show .modal('show'); 触发时，显示弹窗
hide .modal('hide'); 触发时，关闭弹窗
//点击显示弹窗
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
4.事件
模态框支持 4 种时间，分别对应弹出前、弹出后、关闭前和关闭后。
事件类型 描述
show.bs.modal 在 show 方法调用时立即触发。
shown.bs.modal
在模态框完全显示出来，并且等 CSS 动画完成之后触
发。
hide.bs.modal 在 hide 方法调用时，但还未关闭隐藏时触发。
hidden.bs.modal
在模态框完全隐藏之后，并且等 CSS 动画完成之后触
发。
$('#myModal').on('show.bs.modal', function () {
alert('在 show 方法调用时立即触发！');
});
$('#myModal').on('shown.bs.modal', function () {
alert('在模态框显示完毕后触发！');
});
$('#myModal').on('hide.bs.modal', function () {
alert('在 hide 方法调用时立即触发！');
});
$('#myModal').on('hiden.bs.modal', function () {
alert('在模态框显示完毕后触发！');
});
$('#myModal').on('loaded.bs.modal', function () {
alert('远程数据加载完毕后触发！');
});