Geek Answers Handbook

Securely hide Bootstrap modal

I use Bootstrap2.3.2 and I use 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");

In most cases, this works fine, and the modal dialog opens and closes programmatically. However, in some rare cases, the call .modal("hide")does not close the dialog at all, but the dark background is removed.

This is a huge potential problem, because the dialogue may get stuck on the screen and block some of the content.

Is there a reliable way to ensure that the dialog is always closed after the call .modal("hide")? Or better yet, how do we ensure consistent behavior hidefrom Bootstrap? I do not want to completely remove the dialog from the DOM, because the same dialog can be reused on the page.

+4
3

: http://getbootstrap.com/2.3.2/javascript.html#modals

hidden display:none.

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

.

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

I am using 1.9.x, the code below works.

$("#yourModalWindow").modal('hide');
Run code
0
source

More articles:


All Articles