Bootstrap JavaScript插件：模态框（modal.js）

本文介绍了Bootstrap模态框的基本结构、动态实例、尺寸选择、禁止动画效果以及如何通过data属性和JavaScript调用模态框。模态框不支持嵌套，建议作为body的直接子元素。此外，文章还提到了增强模态框的可访问性和使用模态框的事件监听。

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

注意：

模态框不支持嵌套，需要嵌套模态框的话，只能自己手动实现。
模态框包含的html最好尽量作为body的直接子元素，以避免其他组件影响模态框的展现和功能。
弹出层出来以后，页面的滚动条会被覆盖。

模态框主体结构包含了模态框的头、体和一组放置于底部的按钮 :

modal 弹出层父级
modal-dialog 弹出层
modal-content 弹出层的内容区域
modal-header 弹出层的头部区域
modal-body 弹出层的主体区域
modal-footer 弹出层的底部区域
fade 让弹出层有一个运动的效果，加给弹出层父级

基本结构代码如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
		   <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		     ×
		    </button>
		   </div>
		   <div class="modal-body">
			    code。。。
		   </div><!--modal-body-->
		   <div class="modal-footer">
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
		   </div>
<!--modal-footer-->
		</div><!-- modal-content -->
	 </div><!--modal-dialog -->
</div>

在这里插入图片描述

动态实例

点击下面的按钮即可通过 JavaScript 启动一个模态框。在模态框之前添加一个按钮（button），还需要给button添加data-toggle=“modal” 和 data-target=“目标模态框ID”（指定要切换的特定的模态框）来启动模态框效果，模态框将从上到下、逐渐浮现到页面前。代码如下：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
		   <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		     ×
		    </button>
		   </div>
		   <div class="modal-body">
			    code。。。
		   </div><!--modal-body-->
		   <div class="modal-footer">
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
		   </div>
<!--modal-footer-->
		</div><!-- modal-content -->
	 </div><!--modal-dialog -->
</div>

注意：增强模态框的可访问性。务必为.modal添加role="dialog"和aria-labelledby="..."属性，用于指向模态框的标题栏（modal-title）；为.modal-dialog添加aria-hidden="true"属性。

模态框可选尺寸

模态框提供了两个可选尺寸，通过为.modal-dialog增加一个样式调整类实现。
大尺寸模态框（modal-lg）：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
		   <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		     ×
		    </button>
		   </div>
		   <div class="modal-body">
			    code。。。
		   </div><!--modal-body-->
		   <div class="modal-footer">
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
		   </div>
<!--modal-footer-->
		</div><!-- modal-content -->
	 </div><!--modal-dialog -->
</div>

在这里插入图片描述

小尺寸模态框（modal-sm）：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
		   <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		     ×
		    </button>
		   </div>
		   <div class="modal-body">
			    code。。。
		   </div><!--modal-body-->
		   <div class="modal-footer">
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
		   </div>
<!--modal-footer-->
		</div><!-- modal-content -->
	 </div><!--modal-dialog -->
</div>

在这里插入图片描述

实际效果需要自己实际操作并在浏览器上展示。

禁止动画效果
如果不需要模态框弹出时的动画效果（淡入淡出效果），删掉.fade类就可以了。

要利用模态中的引导网格系统（栅格系统），只需在.modal主体（modal-body）中嵌套.rows，然后使用普通的网格系统类；同样的，在模态框中使用表单，只需在.modal主体（modal-body）中嵌套form表单。

用法

通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为<body>元素添加.modal-open类，从而覆盖页面默认的滚动行为，并且还会自动生成一个.modal-backdrop元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=”modal”，同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框（带有 id=”identifier”）。例如：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>

通过 JavaScript 调用：只需一行 JavaScript 代码，即可通过元素的 idmyModal调用模态框：

$('#identifier').modal(options)

参数

backdrop: true/false/‘static’ 背景遮罩的显示与否
keyboard: true/false 键盘上的esc键可否关闭模态框
show：true/false 模态框是否初始好了就立即显示
remote: path 用jquery的load方法加载指定url的内容到*.modal-content*中

方法

$('#myModal').modal(option); //显示模态框 
$('#myModal').modal('toggle'); //切换模态框的显示和隐藏 
$('#myModal').modal('show'); //显示
 $('#myModal').modal('hide'); //隐藏

事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型	描述
show.bs.modal	`show`方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的`relatedTarget`属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的`relatedTarget`属性进行访问。
hide.bs.modal	`hide`方法调用之后立即触发该事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal	从`远端的数据源`加载完数据之后触发该事件。