Bootstrap 3 Modal：如何使用 jquery/javascript 检查模态是否打开或关闭答案

【问题标题】：Bootstrap 3 Modal: how to check if modal is open or closed using jquery/javascriptBootstrap 3 Modal：如何使用 jquery/javascript 检查模态是否打开或关闭
【发布时间】：2014-07-25 06:29:03
【问题描述】：

谁能告诉我如何检查 bootstrap 3.0 模态状态，它是使用 jQuery 还是 javascript 打开还是关闭。我使用了以下代码，但是当您打开一个模式一次时它可以工作，否则会给出数据未定义错误。

if($('#addMemberModal').data('bs.modal').isShown == true){
console.log("Modal is open");
}

【问题讨论】：

查看stackoverflow.com/a/21341587/1781706，看起来这个答案想出了如何解决这个未定义的错误。

标签： jquery twitter-bootstrap-3

【解决方案1】：

你也可以像这样直接使用 jQuery：

$('#myModal').is(':visible');

【讨论】：

【解决方案2】：

你可以参考他们的页面 http://getbootstrap.com/javascript/#modals

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

show.bs.modal
此事件在调用 show 实例方法时立即触发。如果是由单击引起的，则单击的元素可用作事件的 relatedTarget 属性。

shown.bs.modal
当模式对用户可见时触发此事件（将等待 CSS 转换完成）。如果是由单击引起的，则单击的元素可用作事件的 relatedTarget 属性。

hide.bs.modal
当调用 hide 实例方法时立即触发此事件。

hidden.bs.modal 当模态对用户隐藏完成时会触发此事件（将等待 CSS 转换完成）。 loaded.bs.modal 当模态使用远程选项加载内容时触发此事件。

【讨论】：

您还可以检查 css 类 $('.modal').hasClass('in')

【解决方案3】：

尝试检查：

if($("#addMemberModal").data('modal') && $("#addMemberModal").data('modal').isShown ) {
    console.log("Modal is open");
}

或

if( $('#addMemberModal').hasClass('in') ) {
    console.log("Modal is open");
}

【讨论】：

【解决方案4】：

如果模态框以 ajax 加载的表单打开，您可以使用

$(document).on('hidden.bs.modal', '#photoModal', function () {
    cancel_camera();
    document.getElementById('PhotoPerson').innerHTML = '<img src="' +  photoPerson + '"/>';
});*

【讨论】：

【解决方案5】：

我为我的 AJAX 调用使用了以下代码。在 setTimeout 之后，我尝试正确关闭模型并使用 is() 方法来执行此操作。希望它可以帮助某人。

complete: function(){
        setTimeout(function() {
            // model
            if($('#mdlNewOrder').is(':visible')) {
                $('#mdlNewOrder').modal('toggle');
            }
            //buttons
            $('#btn_closeNewOrder').prop("disabled", false);
            $('#btn_NewOrder').prop("disabled", false);
            // table reload
            $('#table_patientlist').DataTable().ajax.reload(null, false);
        }, 2800);
    }

【讨论】：