模态框是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>
效果图: