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?

Answer 1

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

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

Answer 2

After some test, I found that for bootstrap modal need to wait for some time before executing the $(.modal).modal('hide') after executing $(.modal).modal('show'). And i found in my case i need at least 500 milisecond interval between the two.
So this is my test case and solution:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Answer 3

Try This

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

Answer 4

Another way of doing this is that first you remove the class modal-open, which closes the modal. Then you remove the class modal-backdrop that removes the grayish cover of the modal.

Following code can be used:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Answer 5

to close bootstrap modal you can pass 'hide' as option to modal method as follow

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

Please take a look at working fiddle here

bootstrap also provide events that you can hook into modal functionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event you can read more about modal methods and events here in Documentation

If none of the above method work, give a id to your close button and trigger click on close button.

Answer 6

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

use the above code to hide the backdrop of modal if you are using multiple modal pop in one page.