0

Quiero abrir el modal mientras carga la pagina

jQuery(document).ready(function(e) {
    jQuery('#mymodal').trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Actualmente se abre con un boton, pero no quiero ese boton, quiero que se abra solo una vez al inicio de la pagina

2 respuestas 2

4

jQuery(document).ready(function(e) {
    jQuery('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

He utilizado un simple codigo para que cuando el documento este listo el modal se muestre con jQuery(selector).modal('show').

como ves es posible abrirlo directamente desde el código, ademas hay mas opciones aquí te dejo la documentación Modal Options Via Js

Edit:

Como comentaste que deseas que se oculte automaticamente luego de 5 segundos debes agregar el siguiente código que se ejecutara luego de un intervalo de 5000 milisegundos es decir 5 segundos.

setTimeout(function(){ 
  jQuery("#mymodal").fadeOut(); 
}, 5000);
4
  • podrias explicar un poco la respuesta? no se entiende que cambiaste. mira por favor Cómo responder
    – gbianchi
    el 4 ene. 2019 a las 3:47
  • pero debe cerrarse en 5 segundos, como hago eso
    – hubman
    el 4 ene. 2019 a las 3:48
  • 1
    Solo agrega esta función setTimeout(function(){ $("#myModal").hide();},5000); con esto tu modal se cierra a los 5 segundos. el 4 ene. 2019 a las 3:51
  • @gbianchi Gracias por la sugerencia el 4 ene. 2019 a las 17:57
0

Aquí tienes una solución elegante:

$(document).ready(function() {
    $("#mymodal").modal("show");

    setTimeout(function(){
        $("#mymodal").fadeOut();
    }, 5000);
});
2
  • recuerda revisar Cómo responder pues no es solo poner el código y ya, además debes explicarlo para que esta respuesta le sea útil no solo a quien pregunta si no al resto de usuarios que la consulten
    – user75901
    el 4 ene. 2019 a las 4:03
  • por otro lado esta mal visto que se use la zona de respuestas para mandar saludos o felicitaciones, eso no es relevante
    – user75901
    el 4 ene. 2019 a las 4:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.