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

这是一个小提琴Fiddle

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

隐藏的Bootstrap模态不会触发

2 个答案: