可靠地隐藏 Bootstrap 模态答案

【问题标题】：Reliably hide Bootstrap modal可靠地隐藏 Bootstrap 模态
【发布时间】：2013-10-21 14:05:29
【问题描述】：

我正在使用Bootstrap 2.3.2，并且我正在使用这样的模式对话框：

<div id="notice1" class="modal hide fade">
    <div class="modal-body">
        <h4>This is a dialog for user...</h4>
    </div>
    ...
</div>

和

var notice1 = $("#notice1");
notice1.modal({
    keyboard: false,
    backdrop: "static",
    show: false
});

// Show the dialog
notice1.modal("show");

// Close the dialog
notice1.modal("hide");

在大多数情况下，上述工作正常，模式对话框以编程方式打开和关闭。但是，在极少数情况下，调用.modal("hide") 根本不会关闭对话框，尽管删除了深色背景。

这是一个巨大的潜在问题，因为对话框可能会卡在屏幕上并阻止部分内容。

是否有可靠的方法来确保在调用.modal("hide") 后对话框始终关闭？或者更好的是，我们如何确保与Bootstrap 一致的hide 行为？我不想从 DOM 中完全删除对话框，因为相同的对话框可能会在页面上重复使用。

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

您可以使用以下代码隐藏模式。

 $("#notice1").hide();
 $(".modal-backdrop").hide();

【讨论】：

【解决方案2】：

根据文档：http://getbootstrap.com/2.3.2/javascript.html#modals

您可以捕获hidden 事件并强制display:none 属性。

    notice1.on('hidden', function () {
      $(this).css("display", "none")
    })

【讨论】：

【解决方案3】：

我正在使用 1.9.x，下面的代码工作..

$("#yourModalWindow").modal('hide');

【讨论】：