Llamar a una función en el modo de arranque abierto


179

Solía ​​usar el cuadro de diálogo de JQuery UI, y tenía la openopción, donde puede especificar algún código Javascript para ejecutar una vez que se abre el cuadro de diálogo. Hubiera 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 botón de escucha del botón, pero el mensaje de alerta se mostró antes de que apareciera el modal:

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

3
shown.bs.modalEl evento ocurre cuando el documento HTML contiene al menos una <div class="modal fade"><div class="modal-dialog"></div></div>estructura.
Programador químico


Saludo comentario @Programador químico, debería aparecer con la respuesta
Tarek

Respuestas:


331

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

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

Demostración: Plunker

Actualización para Bootstrap 3.0

Para Bootstrap 3.0 aún puede usar el evento mostrado, pero lo usaría así:

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

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


17
Uso $("#code").on("shown.bs.modal", function(e) {})para bootstrap 3.0.
teewuane

asegúrese de tener en cuenta lo que dijo Chemical Programmer sobre la necesidad de la estructura <div class = "modal fade"> <div class = "modal-dialog"> </div> </div> al menos para llamar a este código
whyoz

1
Se #coderefiere al selector jQuery, uno de los ingredientes básicos para jQuery: w3schools.com/jquery/jquery_selectors.asp
DdW

Yo uso $(document).on("shown.bs.modal", ...para escuchar en general
vladkras

1
Al menos el shown.bs.modal se ejecuta antes de que se muestre el modal. Esto no es un problema en mi caso, pero puede ser bueno saberlo.
Jonny

86

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

Para mostrar

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

Para esconderse

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

55
$ ("#modal") .on ('mostrado', función () {alert ("¡Quiero que aparezca después de que se haya abierto el modal!");} ¡¡No funcionaba para mí pero $ (ventana) funcionó !! Gracias @viper_tkd
Krutal Modi

1
Necesitaba vincularme a CUALQUIER modal que se abriera / cerrara, y no mediante un selector específico. Esta respuesta funcionó bien para mí en ese caso.
jyoseph

Esto funciona antes de que modal esté completamente cargado en la GUI. Quiero tomar datos de mi modal después de que se cargue modal: este método devuelve 'indefinido' para todo porque la GUI modal aún no existe, por lo que los campos y todo lo demás aún no se puede consultar. (no visible)
FrenkyB

Esto funcionó para mí, pero agregué un cheque dentro del controlador para apuntar a un modal específico: if( $('#code').is( e.relatedTarget ) ) { ... }ya que tenía múltiples en la página.
Allicarn

Gracias por el nombre correcto del evento, pero no es necesario reemplazar el ID del elemento por $ (ventana). Usando bs4 con jquery 3.4.
Jcc.Sanabria

17

puede usar en showlugar de shownhacer que la función se cargue justo antes de abrir modal, en lugar de después de abrir modal.

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

9

Bootstrap modal expone eventos. Escucha el shownevento como este

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

0

si alguien todavía tiene un problema, lo único que funciona perfectamente para mí 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
        });
});

-4

Puede usar el código de abajo 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 tu proyecto.


77
copycat nuevamente ... ver otras respuestas del usuario
Laurent B
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.