Llamar a una función en bootstrap modal open

Solía usar el diálogo de jQuery UI, y tenía la opción open, donde puede especificar un código Javascript para ejecutar una vez que se abre el diálogo. Habría usado esa opción para seleccionar el texto dentro del diálogo usando una función que tengo.

Ahora quiero hacer eso usando el modal de bootstrap. A continuación se muestra el código 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'

Y en cuanto al botón que abre el modal: 

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

Traté de usar un oyente onclick del botón, pero la alerta el mensaje fue mostrado antes de el modal apareció: 

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});
Author: Mohamed Khamis, 2013-07-04
Source

5 answers

Puede usar el evento mostrado /mostrar evento basado en lo que necesita: 

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

Demo: Plunker

Actualización para Bootstrap 3.0

Para Bootstrap 3.0 todavía puedes usar el evento mostrado pero lo usarías así: 

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

Vea los documentos de Bootstrap 3.0 aquí en "Eventos".

 238
Author: Arun P Johny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-01 12:49:26

No funcionará.. use $(window) en su lugar

/ / PARA MOSTRAR

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

/ / PARA OCULTAR

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
 58
Author: viper_tkd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-28 15:18:24

El modal Bootstrap expone eventos. Escucha el evento the shown como este

$('#my-modal').on('shown', function(){
  // code here
});
 7
Author: Josnidhin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-04 04:07:55

Puede usar show en lugar de shown para hacer que la función se cargue justo antes de la apertura modal, en lugar de después de la apertura modal.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
 7
Author: Atchyut Nagabhairava,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-17 11:52:52

Puede usar el código belw para mostrar y ocultar el modelo bootstrap.

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

Y si desea ocultar el modelo, puede usar el siguiente código.

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

Espero que esta respuesta sea útil para su proyecto.

 -4
Author: Gaurang Sondagar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-13 09:06:23