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

模态框是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），表示引用外部模态框内容。

方法：

扫描二维码关注公众号，回复： 3747499 查看本文章

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

效果图：

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

猜你喜欢