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：

   
   
   







 

模态框（Modal）插件事件

 


   开始演示模态框

 

   aria-labelledby="myModalLabel" aria-hidden="true">
   

     

         

                           aria-hidden="true">×
           
           

               模态框（Modal）标题
           

         

         

            点击关闭按钮检查事件功能。
         

         

                           data-dismiss="modal">
               关闭
           
           
               提交更改