1.在div上添加
aria-hidden="true"
- 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
data-show="false"
- data-show当初始化时显示模态框。
2.添加js
$('#myModal').modal({backdrop: 'static', keyboard: true});
backdrop: 'static' 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
keyboard: true 当按下 escape 键时关闭模态框,设置为 false 时则按键无效
总结:其前面的div添加的属性是为了让模态框一开始就是隐藏的
监听模态框打开还是关闭
事件 | 描述 | 实例 |
---|---|---|
show.bs.moda l | 在调用 show 方法后触发。 | $('#identifier').on('show.bs.modal', function () { // 执行一些动作... }) |
shown.bs.modal | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 | $('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) |
hide.bs.modal | 当调用 hide 实例方法时触发。 | $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) |
1.通过hide.bs.modal来监听模态框关闭
$('#myModal').on('hide.bs.modal', function (){
})
})
2.通过shown.bs.modal监听模态框是打开的
$('#myModal').on("shown.bs.modal", function() {
})
demo:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框(Modal)插件事件</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--------- jQuery ---------->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- <script src="js/jquery-1.10.2.min.js"></script> -->
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h2>模态框(Modal)插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框(Modal) -->
<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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () {
$('#myModal').on('hide.bs.modal', function () {
alert('嘿,我听说您喜欢模态框...');
})
$('#myModal').on("shown.bs.modal", function() {
alert('aa');
})
});
</script>
</body>
</html>
<html>
<head>
<title>Bootstrap 实例 - 模态框(Modal)插件事件</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--------- jQuery ---------->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- <script src="js/jquery-1.10.2.min.js"></script> -->
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h2>模态框(Modal)插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框(Modal) -->
<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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () {
$('#myModal').on('hide.bs.modal', function () {
alert('嘿,我听说您喜欢模态框...');
})
$('#myModal').on("shown.bs.modal", function() {
alert('aa');
})
});
</script>
</body>
</html>