Ich benutzte JQuery UI's Dialog, und es hatte die open
Option, wo Sie einige Javascript-Code angeben können, um auszuführen, sobald der Dialog geöffnet ist. Ich würde diese Option verwendet haben, um den Text innerhalb des Dialogs mit einer Funktion, die ich habe auszuwählen.
Jetzt möchte ich das mit bootstrap's modal tun. 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 angeht, 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 erschien:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Sie können je nach Bedarf das Ereignis Ereignis anzeigen/show verwenden:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Für Bootstrap 3.0 können Sie immer noch das gezeigte Ereignis verwenden, aber Sie würden es wie folgt verwenden:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Siehe die Bootstrap 3.0-Dokumente hier unter "Events".
wird nicht funktionieren. Verwenden Sie stattdessen $(Fenster)
.
//FÜR ANZEIGEN
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//VON VERSTECKEN
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});