Mam modalne okno dialogowe bootstrap, które chcę pokazać początkowo, a następnie, gdy użytkownik kliknie na stronę, znika. Mam następujące elementy:
$(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>
Modal jest początkowo wyświetlany, ale nie zamyka się po kliknięciu poza modalem. Również obszar zawartości nie jest wyszarzony... Jak mogę sprawić, aby modal był wyświetlany początkowo, a następnie zamykany po kliknięciu przez użytkownika poza obszarem? I jak mogę sprawić, żeby tło było wyszarzone, tak jak w demo?
aby zamknąć bootstrap modal możesz przekazać 'hide' jako opcję do metody modalnej jak poniżej
$('#modal').modal('hide');
Proszę spojrzeć na działające [fiddle here][2].
bootstrap dostarcza również zdarzenia, które można podpiąć pod funkcjonalność modal, np. jeśli chcesz wywołać zdarzenie, gdy modal skończy się ukrywać przed użytkownikiem możesz użyć zdarzenia hidden.bs.modal możesz przeczytać więcej o metodach i zdarzeniach modalnych tutaj w Dokumentacja.
Jeśli żadna z powyższych metod nie działa, nadaj id swojemu przyciskowi zamykającemu i wywołaj kliknięcie na przycisk zamykający.
Moje pięć centów na ten jeden jest to, że nie chcę mieć do celu bootstrap modal z id i widząc, jak powinno być tylko jeden modal w tym samym czasie następujące powinny być całkiem wystarczające, aby usunąć modal jako toggle może być niebezpieczne:
$('.modal').removeClass('show');