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

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

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