bootstrap模態框點選空白處模態框不消失、監聽模態框開啟還是關閉
阿新 • • 發佈：2019-01-09
1.在div上新增
aria-hidden="true"
- 屬性 aria-hidden="true" 用於保持模態視窗不可見，直到觸發器被觸發為止（比如點選在相關的按鈕上）。
data-show="false"
- data-show當初始化時顯示模態框。
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() {
})
<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>