Ho una finestra di dialogo modale bootstrap che voglio mostrare inizialmente, poi quando l'utente fa clic sulla pagina, scompare. Ho quanto segue:
$(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>
Il modale viene visualizzato inizialmente, ma non si chiude quando si fa clic all'esterno del modale. Inoltre, l'area del contenuto non è grigia. Come posso fare in modo che il modale venga visualizzato inizialmente e si chiuda dopo che l'utente ha cliccato fuori dall'area? E come posso fare in modo che lo sfondo sia grigio come nella demo?
per chiudere bootstrap modal si può passare 'hide' come opzione al metodo modal come segue
$('#modal').modal('hide');
Si prega di dare un'occhiata al lavoro [fiddle qui][2]
bootstrap fornisce anche eventi che si possono agganciare alla funzionalità modal, ad esempio se si vuole sparare un evento quando il modal ha finito di essere nascosto all'utente si può usare l'evento hidden.bs.modal si può leggere di più sui metodi e gli eventi modal qui in Documentazione
Se nessuno dei metodi precedenti funziona, date un id al vostro pulsante di chiusura e attivate il click sul pulsante di chiusura.
I miei cinque centesimi su questo è che non voglio dover indirizzare il modale di bootstrap con un id e visto che ci dovrebbe essere solo un modale alla volta il seguente dovrebbe essere abbastanza sufficiente per rimuovere il modale come toggle potrebbe essere pericoloso:
$('.modal').removeClass('show');