Chiamata di una funzione su bootstrap modale aperta

Usavo la finestra di dialogo dell'interfaccia utente di JQuery e aveva l' openopzione, in cui è possibile specificare del codice Javascript da eseguire una volta aperta la finestra di dialogo. Avrei usato quell'opzione per selezionare il testo all'interno della finestra di dialogo usando una funzione che ho.

Ora voglio farlo usando il modale di bootstrap. Di seguito è riportato 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">&times;</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 utilizzare un listener onclick del pulsante, ma il messaggio di avviso è stato visualizzato prima che apparisse il modale:

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

Puoi utilizzare l' evento mostrato / mostrare l'evento in base a ciò di cui hai 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 comunque utilizzare l'evento mostrato ma lo utilizzeresti in questo modo:

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

Vedi i documenti Bootstrap 3.0 qui sotto "Eventi".

non funzionerà .. usare $(window)invece

Per mostrare

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

Per nascondersi

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

puoi usare showinvece di shownfare caricare la funzione appena prima dell'apertura modale, anziché dopo l'apertura modale.

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

Bootstrap modale espone eventi. Ascolta l' shownevento in questo modo

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

se qualcuno ha ancora un problema, l'unica cosa che funziona perfettamente per me usando (loaded.bs.modal):

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

È possibile utilizzare il codice belw per mostrare e nascondere il modello bootstrap.

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

e se vuoi nascondere il modello, puoi usare il codice qui sotto.

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

Spero che questa risposta sia utile per il tuo progetto.