Bootstrap 隐藏模式不触发

Question

如标题所说，我无法将 modal.on('hidden') 事件发送到运行。我可以毫无问题地打开模式。我使用的代码看起来像这样：

var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');

模态本身看起来像这样：

 <div class="modal fade" id="infoPopup" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="popupHeader" class="modal-title"></h4>
            </div>
            <div id="popupBody" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

它打开得很好，但当我通过单击模式旁边的关闭按钮或右上角的 X 关闭它时，似乎没有触发隐藏事件。

$('.modal.in').on('hidden',function(){
            console.log('test');
        });

当我尝试使用 $('.modal.in') 在控制台上访问它时，所选模式是正确的。所以我不想在错误的模式上获得回调。我也用 $('.modal.in').on('hidden.bs.modal',func...) 试过了。但是我得到了相同的结果。

感谢您的帮助。

Answer 1

对于bootstrap 3 你需要使用hidden.bs.modal

$('.modal.in').on('hidden.bs.modal', function () {
    // do something…
})

如果你的模式不在 DOM 加载时这应该可以工作

$(document).on('hidden.bs.modal','.modal.in', function () {
    // do something…
})

Answer 2

而不是使用 .modal.in，而是使用您想要触发事件的模态的 ID。如果您想将它用于所有模态，只需使用 .modal 而不是 .modal.in 并且您将在 hidden.bs.modal

上使用

这里有一个fiddleFiddle

$('#infoPopup').on('hidden.bs.modal',function(){
  alert("Modal Closed");
});

Bootstrap 隐藏模式不触发

Bootstrap modal on hidden does not trigger

javascript

bootstrap-modal

twitter-bootstrap-3