javascript - una - ventana emergente bootstrap 4

Llamar a una función en arranque modal abierto

Question

Solía ​​usar el cuadro de diálogo de la interfaz de usuario de JQuery, y tenía la opción open , donde puede especificar 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 cuadro de diálogo usando una función que tengo.

Ahora quiero hacer eso usando el modal de bootstrap. A continuación está 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 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!");
});

Answer 1

Bootstrap modal expone eventos. Escuche el evento que se shown así

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

Answer 2

Puede usar el evento evento / espectáculo mostrado en función de 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".

Answer 3

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

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

y si quiere 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.

Answer 4

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

// PARA MOSTRAR

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

// PARA ESCONDER

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

Answer 5

puede usar show lugar de shown para hacer 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...
})