Ich habe ein Bootstrap-Modal-Dialogfeld, das ich zunächst anzeigen möchte, dann, wenn der Benutzer auf die Seite klickt, verschwindet es. Ich habe die folgenden:
$(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>
Das Modal wird anfangs angezeigt, aber es wird nicht geschlossen, wenn außerhalb des Modals geklickt wird. Außerdem ist der Inhaltsbereich nicht ausgegraut. Wie kann ich erreichen, dass das Modal anfangs angezeigt und dann geschlossen wird, wenn der Benutzer außerhalb des Bereichs klickt? Und wie kann ich erreichen, dass der Hintergrund wie in der Demo ausgegraut wird?
Setzen Sie modal('toggle')
anstelle von modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
um bootstrap modal zu schließen, können Sie 'hide' als Option an die modale Methode wie folgt übergeben
$('#modal').modal('hide');
Bitte werfen Sie einen Blick auf die Arbeit [fiddle here][2]
bootstrap bietet auch Ereignisse an, die Sie in die modale Funktionalität einbinden können. Wenn Sie z.B. ein Ereignis auslösen wollen, wenn das Modal vor dem Benutzer versteckt wurde, können Sie das hidden.bs.modal Ereignis verwenden. Sie können mehr über modale Methoden und Ereignisse hier in Dokumentation lesen.
Wenn keine der oben genannten Methoden funktioniert, geben Sie Ihrer Schließen-Schaltfläche eine ID und lösen Sie einen Klick auf die Schließen-Schaltfläche aus.
Meine fünf Cent auf dieser ist, dass ich don't haben wollen, um die Bootstrap-Modal mit einer Id Ziel und sehen, wie es sollte nur ein Modal zu einem Zeitpunkt die folgenden sollte völlig ausreichend sein, um das Modal als Toggle entfernen könnte gefährlich sein:
$('.modal').removeClass('show');