可靠地隐藏Bootstrap模态框

Question

我正在使用 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？我不想完全从DOM中删除对话框，因为同一对话框可能会在页面上被重复使用。

- MLister

Answer 1

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

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

- Elanchezhian Narayanasamy

Answer 2

根据文档：http://getbootstrap.com/2.3.2/javascript.html#modals 您可以捕获“hidden”事件并强制使用“display:none”属性。

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

- marquez

Answer 3

我在使用1.9.x版本，以下代码有效...

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

- Kris