bootstrap的模态框modal的hidden.bs.modal属性

最新推荐文章于 2024-05-10 03:02:15 发布

邓波home

最新推荐文章于 2024-05-10 03:02:15 发布

阅读量1.6w

点赞数

分类专栏： web前端

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.csdn.net/dengboblog/article/details/54729846

版权

web前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

这个问题是在春节大展活动上面遇到的问题，项目地址是：http://hd.tongji021.com/20170103/

在抽奖的时候遇到的坑，非常感谢。

hidden.bs.modal的意思就是当弹出的模态框消失的时候，接下来回调的函数

$("#modal").on('hidden.bs.modal',function(){
        alert(1);
        $( '#modal' ).off().on( 'hidden', 'hidden.bs.modal');  
    })

消除已存在钩子事件的动作
因采用 jQuery .on() 方式绑定钩子事件所以我们要用jquery 的 .off() 方式去移除掉已经绑定事件的操作

下面是一个小的demo

<html>
<head>
	<title></title>
</head>
<link href="http://cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.1.0/js/modal.min.js"></script>
<body>
<button class="alert">弹出</button>
<div class="modal fade" tabindex="-1" role="dialog" id='modal'>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">标题</h4>
      </div>
      <div class="modal-body">
        <p>内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
<script type="text/javascript">
$(".alert").click(function() {
	$("#modal").modal();
	$("#modal").on('hidden.bs.modal',function(){
        alert(1);
        $( '#modal' ).off().on( 'hidden', 'hidden.bs.modal');  
    })
    // $( '#modal' ).modal( 'hide' ); 
    
})

</script>
</html>

邓波home

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的模态框modal的hidden.bs.modal属性

hidden.bs.modal的意思就是当弹出的模态框消失的时候，接下来回调的函数$("#modal").on('hidden.bs.modal',function(){ alert(1); $( '#modal' ).off().on( 'hidden', 'hidden.bs.modal'); })消除已存在钩子事件的动作因采用jQue
复制链接

扫一扫