Reliably hide Bootstrap modal

Question

I'm using Bootstrap 2.3.2, and I'm using modal dialogs like this:

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

and

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

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

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

Most of the the time, the above works fine and the modal dialog are opened and closed programmatically. However, in some rare cases, calling .modal("hide") does not close the dialog at all though the dark backdrop is removed.

This is a huge potential issue because the dialog may get stuck on the screen and block part of the content.

Is there a reliable way to ensure the dialog is always closed after calling .modal("hide")? Or better yet, how do we ensure a consistent hide behavior from Bootstrap? I don't want to remove the dialog completely from the DOM, because the same dialog may be re-used on the page.

Answer 1

According to documentation: http://getbootstrap.com/2.3.2/javascript.html#modals

You can catch the hidden event and force the display:none property.

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