Aufruf einer Funktion auf Bootstrap Modal Open

Ich habe das Dialogfeld der JQuery-Benutzeroberfläche verwendet und es gab die openOption, 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">&times;</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!");
});

Sie können das angezeigte Ereignis / Show-Ereignis je nach Bedarf 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, aber Sie würden es folgendermaßen verwenden:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

Weitere Informationen finden Sie in den Bootstrap 3.0-Dokumenten hier unter "Ereignisse".

wird nicht funktionieren .. $(window)stattdessen verwenden

Zum Zeigen

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

Zum Verstecken

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

Sie können verwenden, showanstatt showndie Funktion direkt vor dem Öffnen des Modals zu laden, anstatt nach dem Öffnen des Modals.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

Das Bootstrap-Modal macht Ereignisse verfügbar. Hören Sie sich das shownEreignis so an

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

Wenn jemand immer noch ein Problem hat, funktioniert das einzige, was für mich perfekt funktioniert, indem er (load.bs.modal) verwendet:

 $('#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
        });
});

Sie können den folgenden Code verwenden, um das Bootstrap-Modell ein- und auszublenden.

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

und wenn Sie das Modell ausblenden möchten, können Sie den folgenden Code verwenden.

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

Ich hoffe, diese Antwort ist nützlich für Ihr Projekt.