Advertisement
Advertisement


Close Bootstrap Modal


Question

I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

The modal is displayed initially, but it does not close when clicked outside of the modal. Also, the content area is not greyed out.. How can I get the modal to display initially, then close after the user clicks outside the area? And how can I get the background to be grayed out as in the demo?

2016/03/03
1
442
3/3/2016 7:08:15 AM

Accepted Answer

Put modal('toggle') instead of modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
2013/05/11
725
5/11/2013 3:19:28 AM


$('#modal').modal('toggle'); 

or

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

should work.

But if nothing else works you can call the modal close button directly:

$("#modal .close").click()
2016/06/09

this worked for me:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

use this link modal close

2018/10/11

$("#your-modal-id").modal('hide');

Running this call via class ($(".my-modal")) won't work.

2016/12/05

Try This

$('#modal_id').modal('hide');
2019/07/16

this one is pretty good and it also works in angular 2

$("#modal .close").click()
2017/03/01