Aufruf einer Funktion auf Bootstrap Modal Open

178

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!");
});
Mohamed Khamis
quelle
3
shown.bs.modalEreignis tritt auf, wenn das HTML-Dokument mindestens eine <div class="modal fade"><div class="modal-dialog"></div></div>Struktur enthält .
Chemischer Programmierer
Gruß Kommentar @Chemical Programmer, es sollte mit der Antwort erscheinen
Tarek

Antworten:

329

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

Arun P Johny
quelle
17
Verwenden Sie $("#code").on("shown.bs.modal", function(e) {})für Bootstrap 3.0.
Teewuane
Stellen Sie sicher, dass Sie berücksichtigen, was Chemical Programmer über die Notwendigkeit der Struktur <div class = "modal fade"> <div class = "modal-dialog"> </ div> </ div> gesagt hat, damit dieser Code aufgerufen wird
Whyoz
1
Das #codebezieht sich auf den jQuery-Selektor, eine der Grundzutaten für jQuery: w3schools.com/jquery/jquery_selectors.asp
DdW
Ich benutze $(document).on("shown.bs.modal", ...für das allgemeine Hören
vladkras
1
Zumindest das gezeigte.bs.modal wird tatsächlich ausgeführt, bevor das Modal angezeigt wird. Dies ist in meinem Fall kein Problem, kann aber gut zu wissen sein.
Jonny
86

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');
});
viper_tkd
quelle
5
$ ("#modal") .on ('angezeigt', function () {alert ("Ich möchte, dass dies nach dem Öffnen des Modals angezeigt wird!");} Hat bei mir nicht funktioniert, aber $ (Fenster) hat funktioniert !! Danke @viper_tkd
Krutal Modi
1
Ich musste mich an JEDES Modal binden, das geöffnet / geschlossen wurde, und nicht an einen bestimmten Selektor. Diese Antwort hat in diesem Fall für mich gut funktioniert.
Jyoseph
Dies funktioniert, bevor Modal vollständig auf der GUI geladen ist. Ich möchte Daten von meinem Modal übernehmen, nachdem das Modal geladen wurde. Diese Methode gibt für alles 'undefined' zurück, da die modale GUI noch nicht vorhanden ist, sodass Felder und alles andere noch nicht abfragbar sind. (nicht sichtbar)
FrenkyB
Dies hat bei mir funktioniert, aber ich habe im Handler eine Prüfung hinzugefügt, um auf ein bestimmtes Modal abzuzielen: if( $('#code').is( e.relatedTarget ) ) { ... }da ich mehrere auf der Seite hatte.
Allicarn
Vielen Dank für den korrekten Ereignisnamen, aber es ist nicht erforderlich, die Element-ID für $ (Fenster) zu ersetzen. Verwenden von bs4 mit jquery 3.4.
Jcc.Sanabria
16

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

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

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

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

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.

Gaurang Sondagar
quelle
7
Nachahmer wieder ... siehe die anderen Antworten des Benutzers
Laurent B