Ich habe das Dialogfeld der JQuery-Benutzeroberfläche verwendet und es gab die open
Option, mit der Sie Javascript-Code angeben können, der ausgeführt werden soll, sobald das Dialogfeld geöffnet wird. Ich hätte diese Option verwendet, um den Text im Dialogfeld mit einer meiner Funktionen auszuwählen.
Jetzt möchte ich das mit dem Bootstrap-Modal machen. Unten ist der HTMl-Code:
<div id="code" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<pre>
print 'Hello World'
Und was die Schaltfläche betrifft, die das Modal öffnet:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Ich habe versucht, einen Onclick-Listener für die Schaltfläche zu verwenden, aber die Warnmeldung wurde angezeigt, bevor das Modal angezeigt wurde :
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
javascript
jquery
jquery-ui
twitter-bootstrap
modal-dialog
Mohamed Khamis
quelle
quelle
shown.bs.modal
Ereignis tritt auf, wenn das HTML-Dokument mindestens eine<div class="modal fade"><div class="modal-dialog"></div></div>
Struktur enthält .Antworten:
Sie können das angezeigte Ereignis / Show-Ereignis je nach Bedarf verwenden:
Demo: Plunker
Update für Bootstrap 3.0
Für Bootstrap 3.0 können Sie das angezeigte Ereignis weiterhin verwenden, aber Sie würden es folgendermaßen verwenden:
Weitere Informationen finden Sie in den Bootstrap 3.0-Dokumenten hier unter "Ereignisse".
quelle
$("#code").on("shown.bs.modal", function(e) {})
für Bootstrap 3.0.#code
bezieht sich auf den jQuery-Selektor, eine der Grundzutaten für jQuery: w3schools.com/jquery/jquery_selectors.asp$(document).on("shown.bs.modal", ...
für das allgemeine Hörenwird nicht funktionieren ..
$(window)
stattdessen verwendenZum Zeigen
Zum Verstecken
quelle
if( $('#code').is( e.relatedTarget ) ) { ... }
da ich mehrere auf der Seite hatte.Sie können verwenden,
show
anstattshown
die Funktion direkt vor dem Öffnen des Modals zu laden, anstatt nach dem Öffnen des Modals.quelle
Das Bootstrap-Modal macht Ereignisse verfügbar. Hören Sie sich das
shown
Ereignis so anquelle
Wenn jemand immer noch ein Problem hat, funktioniert das einzige, was für mich perfekt funktioniert, indem er (load.bs.modal) verwendet:
quelle
Sie können den folgenden Code verwenden, um das Bootstrap-Modell ein- und auszublenden.
und wenn Sie das Modell ausblenden möchten, können Sie den folgenden Code verwenden.
Ich hoffe, diese Antwort ist nützlich für Ihr Projekt.
quelle