Tengo un cuadro de diálogo modal de bootstrap que quiero que se muestre inicialmente, luego cuando el usuario hace clic en la página, desaparece. Tengo lo siguiente:
$(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>
El modal se muestra inicialmente, pero no se cierra cuando se hace clic fuera del modal. Además, el área de contenido no está en gris.. ¿Cómo puedo conseguir que el modal se muestre inicialmente y se cierre después de que el usuario haga clic fuera del área? ¿Y cómo puedo conseguir que el fondo sea gris como en la demostración?
para cerrar el bootstrap modal puede pasar 'hide' como opción al método modal como sigue
$('#modal').modal('hide');
Por favor, eche un vistazo al [fiddle here][2] de trabajo
bootstrap también proporciona eventos que puedes enganchar en la funcionalidad modal, por ejemplo, si quieres disparar un evento cuando el modal ha terminado de ocultarse del usuario puedes usar el evento hidden.bs.modal puedes leer más sobre los métodos y eventos modales aquí en Documentación
Si ninguno de los métodos anteriores funciona, dale un id a tu botón de cierre y dispara el clic en el botón de cierre.
Mis cinco centavos en este caso es que no quiero tener que apuntar al modal de bootstrap con un id y viendo que sólo debe haber un modal a la vez lo siguiente debería ser suficiente para eliminar el modal como toggle podría ser peligroso:
$('.modal').removeClass('show');