响应式前端框架Bootstrap系列（16）模态框（Modal）插件

喜欢ヅ旅行 2021-09-14 14:20 494阅读 0赞

模态框是bs框架的插件之一，之所以称为插件，是因为它有这自己的一套API，可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件，都支持以下几个共同的属性：

data-toggle属性：表示点击或链接时触发的事件。  
data-target属性：表示点击或链接时触发的事件后将要被显示或隐藏的目标元素。  
data-dismiss：是bootstrap里自定义的属性，给一个元素data-dimiss属性的话，可以通过点击该元素达到让目标消失的效果。

若要取消插件自带的事件监听，可使用：

全部取消：$(document).off('.data-api');  
单独某插件取消：$(document).off('.modal.data-api');该代码只取消了模态框

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。

模态框有关样式有：

.modal：用来把 <div> 的内容识别为模态框。  
.fade：当模态框被切换时，它会引起内容淡入淡出。  
.modal-dialog：表示模态对话框。  
.modal-content：表示模态内容。  
.modal-header：表示模态对话框头部。  
.modal-title：表示模态对话框标题，通常放在.modal-header的容器内。  
.modal-body：表示模态对话框主体内容。  
.modal-footer：表示模态对话框尾部。

以下是模态框的API，包括入参项、方法和事件。

入参项：

（1）backdrop，属性data-backdrop（默认为true），指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。  
（2）keyboard，属性data-keyboard（默认为true），当按下 escape 键时关闭模态框，设置为 false 时则按键无效。  
（3）show，属性data-show（默认为true），当初始化时显示模态框。  
（4）remote，属性data-remote（默认为false），表示引用外部模态框内容。

方法：

（1）.modal(options)，把内容作为模态框激活。接受一个可选的选项对象。如$('\#myModal').modal(\{keyboard: false\})  
（2）.modal('show')，手动打开模态框。如$('\#myModal').modal('show')  
（3）.modal('hide')，手动隐藏模态框。如$('\#myModal').modal('hide')

事件：

（1）show.bs.modal，在调用 show 方法后触发。如$('\#myModal').on('show.bs.modal', function() \{\});  
（2）shown.bs.modal，当模态框对用户可见时触发（将等待 CSS 过渡效果完成）  
（3）hide.bs.modal，当调用 hide 实例方法时触发。  
（4）hidden.bs.modal，当模态框完全对用户隐藏时触发。

模态框演示代码：

<body>
    	<div class="container">
    		<h2>创建模态框（Modal）</h2>
    		<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>
    						<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
    					</div>
    					<div class="modal-body">是否更改您的资料？</div>
    					<div class="modal-footer">
    						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    						<button type="button" class="btn btn-primary">提交更改</button>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    <script>
    	$('#myModal').on('show.bs.modal', function() {
    		console.log('show.bs.modal');
    	});
    
    	$('#myModal').on('shown.bs.modal', function() {
    		console.log('shown.bs.modal');
    	})
    
    	$('#myModal').on('hide.bs.modal', function() {
    		console.log('hide.bs.modal');
    	})
    
    	$('#myModal').on('hidden.bs.modal', function() {
    		console.log('hidden.bs.modal');
    	})
    </script>

效果图：

![SouthEast][]

[SouthEast]: /images/20210813/c37e5675188e4ad8aa6e311e63943c3b.png