wake-up-neo.com

Aufruf einer Funktion beim Bootstrap-Modal-Open

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">&times;</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!");
});
javascriptjqueryjquery-uitwitter-bootstrapmodal-dialog
135
Mohamed Khamis

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

Update für Bootstrap 3.0

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".

261
Arun P Johny

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');
});
65
viper_tkd

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...
})
8
Atchyut Nagabhairava

Bootstrap-Modal macht Ereignisse verfügbar. Hören Sie auf das shown-Ereignis wie folgt

$('#my-modal').on('shown', function(){
  // code here
});
7
Josnidhin

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
        });
});
0
Erose