Chiamare una funzione su bootstrap modal open

Question

Altro

Fonte Versione non AMP Modifica

Chiamare una funzione su bootstrap modal open

Usavo la finestra di dialogo di JQuery UI, e aveva l'opzione open, dove si può specificare del codice Javascript da eseguire una volta che la finestra è aperta. Avrei usato quell'opzione per selezionare il testo all'interno della finestra di dialogo usando una funzione che ho.

Ora voglio farlo usando il modal di bootstrap. Qui sotto c'è il codice HTMl:

<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'

E per quanto riguarda il pulsante che apre il modale

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

Ho provato a usare un listener onclick del pulsante, ma il messaggio di avviso è stato visualizzato prima che il modale apparisse:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

Arun P Johny · Accepted Answer · 2013-07-04T04:06:25+00:00

Soluzione

Arun P Johny

Fonte Versione non AMP Modifica

Potete usare l'evento shown event/show in base a ciò di cui avete bisogno:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

Demo: Plunker

Aggiornamento per Bootstrap 3.0

Per Bootstrap 3.0 puoi ancora usare l'evento mostrato ma lo useresti in questo modo:

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

Vedi la documentazione di Bootstrap 3.0 qui sotto "Events".

Vibhor

Risposta modificata 23º ottobre 2019 в 8:51

295

0

Commentari (10)