bootstrap模态框点击空白处模态框不消失、监听模态框打开还是关闭

最新推荐文章于 2021-11-24 11:20:42 发布

原创最新推荐文章于 2021-11-24 11:20:42 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

27 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

本文介绍了如何使用Bootstrap模态框插件的事件监听功能，包括模态框的打开、关闭等状态变化事件，并提供了一个完整的示例代码。

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

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>



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


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

<script>
$(function () {
$('#myModal').on('hide.bs.modal', function () {
alert('嘿，我听说您喜欢模态框...');
})

$('#myModal').on("shown.bs.modal", function() {
alert('aa');
})
});
</script>

</body>
</html>