Ich habe früher das Dialogfeld der JQuery-Benutzeroberfläche verwendet, und es gab die Option open
, mit der Sie einen Javascript-Code angeben können, der nach dem Öffnen des Dialogfelds ausgeführt werden soll. Ich hätte diese Option verwendet, um den Text innerhalb des Dialogs mit einer Funktion auszuwählen, die ich habe.
Jetzt möchte ich das mit Bootstraps 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 den Button betrifft, der das Modal öffnet:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Ich habe versucht, einen Onclick-Listener der Schaltfläche zu verwenden, aber die Warnmeldung wurde angezeigt - vor der Modal wurde angezeigt:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Sie können das shown event / show event basierend auf dem, was Sie brauchen, 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 das angezeigte Ereignis weiterhin verwenden, würden es jedoch folgendermaßen verwenden:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Siehe die Bootstrap 3.0-Dokumente hier unter "Ereignisse".
funktioniert nicht. Verwenden Sie stattdessen $(window)
// ZUM ZEIGEN
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
// FÜR DAS VERSTECKEN
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});
sie können show
anstelle von shown
verwenden, um die Funktion vor dem modalen Öffnen statt nach dem modalen Öffnen zu laden.
$('#code').on('show.bs.modal', function (e) {
// do something...
})
Bootstrap-Modal macht Ereignisse verfügbar. Hören Sie auf das shown
-Ereignis wie folgt
$('#my-modal').on('shown', function(){
// code here
});
wenn jemand noch ein Problem hat, funktioniert das einzige, was perfekt funktioniert, wenn Sie (loaded.bs.modal) verwenden:
$('#editModal').on('loaded.bs.modal', function () {
console.log('edit modal loaded');
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
clearBtn: true,
rtl: false,
todayHighlight: true,
toggleActive: true,
changeYear: true,
changeMonth: true
});
});