Eu tenho uma caixa de diálogo modal bootstrap que quero mostrar inicialmente, depois quando o usuário clica na página, ela desaparece. Eu tenho o seguinte:
$(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>
O modal é exibido inicialmente, mas não fecha quando clicado fora do modal. Além disso, a área de conteúdo não é cinzenta. Como posso fazer com que o modal seja exibido inicialmente, e depois fechar quando o utilizador clica fora da área? E como posso fazer com que o fundo fique cinzento como na demonstração?
para fechar bootstrap **modal*** você pode passar 'hide' como opção ao método modal como segue
$('#modal').modal('hide');
Por favor, dê uma olhada no trabalho [fiddle here][2]
bootstrap também fornece eventos que você pode conectar à funcionalidade modal, como se você quiser disparar um evento quando o modal tiver terminado de ser escondido do usuário você pode usar hidden.bs.modal evento você pode ler mais sobre métodos modais e eventos aqui em Documentação.
Se nenhum dos métodos acima funcionar, dê uma identificação ao seu botão fechar e clique no botão fechar.
Meus cinco centavos neste aqui é que eu não'não quero ter que ter que apontar o modal bootstrap com um id e visto que deve haver apenas um modal de cada vez o seguinte deve ser bastante suficiente para remover o modal, pois o toggle pode ser perigoso:
$('.modal').removeClass('show');