bootstrap的模態框modal的hidden.bs.modal屬性
阿新 • • 發佈：2019-01-23
這個問題是在春節大展活動上面遇到的問題，專案地址是：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 的
下面是一個小的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>