Ik heb een bootstrap modal dialoogvenster dat ik in eerste instantie wil laten zien, en dan wanneer de gebruiker op de pagina klikt, verdwijnt het. Ik heb het volgende:
$(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>
De modal wordt in eerste instantie weergegeven, maar hij sluit niet wanneer er buiten de modal op wordt geklikt. Ook is het inhoudsgebied niet grijs... Hoe kan ik ervoor zorgen dat de modal in eerste instantie wordt weergegeven, en dan sluit nadat de gebruiker buiten het gebied klikt? En hoe kan ik de achtergrond grijs maken zoals in de demo?
om bootstrap modal te sluiten kunt u 'hide' als optie doorgeven aan de modal methode, als volgt
$('#modal').modal('hide');
Kijk eens naar het werk [fiddle hier][2]
bootstrap biedt ook gebeurtenissen die u kunt haken in modal functionaliteit, bijvoorbeeld als u een gebeurtenis wilt afvuren wanneer de modal klaar is met verborgen worden voor de gebruiker kunt u hidden.bs.modal gebeurtenis gebruiken u kunt meer lezen over modal methoden en gebeurtenissen hier in Documentatie
Als geen van de bovenstaande methodes werkt, geef dan een id aan je sluit knop en trigger klik op sluit knop.
Mijn vijf cent op deze is dat ik niet wil hebben om de bootstrap modal target met een id en aangezien er slechts een modal tegelijk zou moeten zijn het volgende zou moeten zijn ruim voldoende om de modal te verwijderen als toggle gevaarlijk zou kunnen zijn:
$('.modal').removeClass('show');