第十三节 Bootstrap模态框插件

Bootstrap模态框插件

学习要点：

1.基本使用

2.用法说明

本节课我们主要学习一下 Bootstrap 中的模态框插件，这是一款交互式网站非常常见的 弹窗功能插件。

一．基本使用

使用模态框的弹窗组件需要三层 div 容器元素：

1分别为 modal(模态声明层)、

2dialog(窗口声明层)、

3content(内容层)。

在内容层里面，还有三层：

1分别为 header(头 部)、

2body(主体)、

3footer(注脚)。

modal样式class类，写在声明模态框<div>里，模态框区块声明(Bootstrap)

show样式class类，写在声明模态框<div>里，表示模态框显示,默认模态框是隐藏的(Bootstrap)

modal-dialog样式class类，写在声明模态框窗口<div>里，模态框窗口区域声明(Bootstrap)

modal-content样式class类，写在声明模态框内容<div>里，模态框内容区域声明(Bootstrap)

modal-header样式class类，写在模态框内容里头部<div>里，模态框内容头部区域样式(Bootstrap)

close样式class类，写在模态框头部<button>里，模态框内容头部区域关闭按钮样式(Bootstrap)

data-dismiss="modal"模态框事件点击后关闭模态框，写在模态框关闭按钮<button>里(Bootstrap)

modal-title样式class类，写在模态框头部<h1-h4>里，模态框内容头部区域标题样式(Bootstrap)

modal-body样式class类，写在模态框主体<div>里，设置模态框主体样式(Bootstrap)

modal-footer样式class类，写在模态框底部<div>里，设置模态框底部样式(Bootstrap)

<div> <!--modal模态框区块声明，show表示模态框显示 --> <div> <!--modal-dialog模态框窗口区域声明 --> <div> <!--modal-content模态框内容区域声明 --> <div> <!--modal-header模态框内容头部区域样式--> <button type="button" data-dismiss="modal"> <!--close模态框内容头部区域关闭按钮样式，data-dismiss="modal"事件点击后关闭模态框--> <span>&times;</span> </button> <h4>会员登录</h4> <!--modal-title模态框内容头部区域标题样式--> </div> <div> <!--modal-body设置模态框主体样式--> <p>暂时无法登录会员</p> </div> <div> <!--modal-footer设置模态框底部样式 --> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div>

让模态框自动隐藏，然后通过点击按钮弹窗

data-toggle="modal"声明事件切换类型，modal表示模态框类型，写在<button>里(Bootstrap)

data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素，写在<button>里(Bootstrap)

<div> <!--模态框去掉 show，增加一个 id--> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <div> <p>暂时无法登录会员</p> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><!--data-toggle="modal"声明事件切换类型，modal表示模态框类型(Bootstrap)--><!--data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素(Bootstrap)--><button data-toggle="modal" data-target="#myModal"> 点击弹窗</button>

点击后

模态框弹窗大小

弹窗的大小有三种，默认情况下是正常，还有 lg(大)和 sm(小)

modal-lg样式class类，写在模态框窗口区域声明<div>里，模态框大尺寸(Bootstrap)

modal-sm样式class类，写在模态框窗口区域声明<div>里，模态框小尺寸(Bootstrap)

<div> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <div> <p>暂时无法登录会员</p> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><button data-toggle="modal" data-target="#myModal"> 点击弹窗</button>

模态框弹窗淡入淡出效果

fade样式class类，写在声明模态框<div>里，设置模态框弹窗淡入淡出效果(Bootstrap)

<div> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <div> <p>暂时无法登录会员</p> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><button data-toggle="modal" data-target="#myModal"> 点击弹窗</button>

模态框在主体部分使用栅格系统中的流体

<div> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <!--在模态框主体里使用流体删格系统--> <div> <div> <div> <div>1</div> <div>1</div> <div>1</div> </div> </div> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><button data-toggle="modal" data-target="#myModal"> 点击弹窗</button>

二．用法说明

基本使用介绍结束之后，我们就来看下插件的各种重要用法。所有的插件，都是基于 JavaScript/jQuery 的。那么，就有四个要素：用法、参数、方法和事件。

1.用法

第一种：可以通过 data 属性，在触发模态框按钮上使用

data-toggle 表示触发类型

data-target 表示触发的节点

<div> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <!--在模态框主体里使用流体删格系统--> <div> <div> <div> <div>1</div> <div>1</div> <div>1</div> </div> </div> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><button data-toggle="modal" data-target="#myModal"> 点击弹窗</button>

如果不是使用<button>，而是<a>，其中 data-target 也可以使用 href="#myModal"，取代。当然，我们建议使用 data-target。除了 data-toggle 和 data-target 两个声明 属性外，还有一些可以用选项。

2.选用参数，写在触发模态框的按钮里

可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

data-backdrop 布尔值或"static" true默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串"static"，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

<button data-toggle="modal" data-target="#myModal" data-backdrop="true"> 点击弹窗</button>

<button data-toggle="modal" data-target="#myModal" data-backdrop="false"> 点击弹窗</button>

<button data-toggle="modal" data-target="#myModal" data-backdrop="static"> 点击弹窗</button>

data-keyboard 布尔值 true 如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。

<button data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false"> 点击弹窗</button>

<button data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="true"> 点击弹窗</button>

data-show 布尔值 true 如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏。

在按钮触发，不是很明显

<button data-toggle="modal" data-target="#myModal" data-backdrop="static" data-show="true"> 点击弹窗</button>

<button data-toggle="modal" data-target="#myModal" data-backdrop="static" data-show="false"> 点击弹窗</button>

href url 路径 空值如果值不是以#号开头，则表示一个url 地址，加载 url 内容到modal-content 模态框内容区域div里，并只加载一次。如果是#号，就是取代data-target 的方法。

如果值是以#开头就是代替data-target属性后面跟事件指向id名称

<button data-toggle="modal" data-backdrop="static" href="#myModal"> 点击弹窗</button>

如果href值不是以#开头，是一个远程地址如bfq.html，就是将远程bfq.html文件里的内容加载到modal-content模态框内容区域div里

bfq.html文件

<div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>远程加载</h4></div><!--在模态框主体里使用流体删格系统--><div> <div> <div> <div>6</div> <div>6</div> <div>6</div> </div> </div></div><div> <button type="button"> 注册 </button> <button type="button"> 登录 </button></div>

模态框页面

<div> <div> <div> <!--<div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> &lt;!&ndash;在模态框主体里使用流体删格系统&ndash;&gt; <div> <div> <div> <div>1</div> <div>1</div> <div>1</div> </div> </div> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div>--> </div> </div></div><button data-toggle="modal" data-target="#myModal" data-backdrop="static" href="bfq.html"> 点击弹窗</button>

当然，也可以在 JavaScript 直接设置。

modal()将指定元素执行模态框方法，参数是一个对象，里写各种需要属性参数(Bootstrap)

backdrop 布尔值或"static"true默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串"static"，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

keyboard 布尔值 true 如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。

show 布尔值 true 如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏。

remote #路径 url远程获取指定内容填充到modal-content 容器内。

bfq.html文件

<div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>远程加载</h4></div><!--在模态框主体里使用流体删格系统--><div> <div> <div> <div>6</div> <div>6</div> <div>6</div> </div> </div></div><div> <button type="button"> 注册 </button> <button type="button"> 登录 </button></div>

模态框页面

<div> <div> <div> </div> </div></div><button data-toggle="modal" data-target="#myModal"> 点击弹窗</button>

js文件

$(function () { $("#myModal").modal({ backdrop:"static", //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。 keyboard:false, //false，按 esc 键会不会关闭模态框 show:false, //如果是 false，初始化时，默认隐藏 remote:"bfq.html" //远程获取指定内容填充到modal-content 容器内 });});

3.方法

toggle .modal("toggle"); 触发时，反转切换弹窗状态(Bootstrap)

show .modal("show"); 触发时，显示弹窗(Bootstrap)

hide .modal("hide"); 触发时，关闭弹窗(Bootstrap)

<div> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <!--在模态框主体里使用流体删格系统--> <div> <div> <div> <div>1</div> <div>1</div> <div>1</div> </div> </div> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><button> 点击弹窗</button>

js

$(function () { $("#sdfg").on("click", function () { //获取按钮执行点击事件 $("#myModal").modal("show"); //点击按钮后将模态框，反转切换弹窗状态，也就是隐藏显示切换 }); $("#myModal").modal({ backdrop:"static", //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。 keyboard:false, //false，按 esc 键会不会关闭模态框 show:false, //如果是 false，初始化时，默认隐藏 });});

其他两个方法使用相同

4.事件

模态框支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

show.bs.modal 在 show 方法调用时立即触发。(Bootstrap)

shown.bs.modal 在模态框完全显示出来，并且等 CSS 动画完成之后触发。(Bootstrap)

hide.bs.modal 在 hide 方法调用时，但还未关闭隐藏时触发。(Bootstrap)

hidden.bs.modal 在模态框完全隐藏之后，并且等 CSS 动画完成之后触发。(Bootstrap)

loaded.bs.modal "远程数据加载完毕后触发(Bootstrap)

js

$(function () { $("#sdfg").on("click", function () { //获取按钮执行点击事件 $("#myModal").modal("show"); //点击按钮后将模态框，反转切换弹窗状态，也就是隐藏显示切换 }); $("#myModal").modal({ backdrop:"static", //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。 keyboard:false, //false，按 esc 键会不会关闭模态框 show:false, //如果是 false，初始化时，默认隐藏 }); $("#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("远程数据加载完毕后触发！"); });});

HTML

<div> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>&times;</span> </button> <h4>会员登录</h4> </div> <!--在模态框主体里使用流体删格系统--> <div> <div> <div> <div>1</div> <div>1</div> <div>1</div> </div> </div> </div> <div> <button type="button"> 注册 </button> <button type="button"> 登录 </button> </div> </div> </div></div><button> 点击弹窗</button>