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 pletely from the DOM, because the same dialog may be re-used on the page.

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 pletely from the DOM, because the same dialog may be re-used on the page.

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-2

Share Improve this question Follow edited Nov 20, 2013 at 16:13 zessx 68.8k2929 gold badges138138 silver badges164164 bronze badges asked Oct 21, 2013 at 14:05 MListerMLister 10.4k1818 gold badges6767 silver badges9393 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can hide the modal by using the following code.

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

According to documentation: http://getbootstrap./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")
    })

I am using 1.9.x, below code working..

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