1

Me he pasado todo el día navegando por la red, en busca de la solución a este lío. Quiero hacer que este modal aparezca inmediatamente ingresen a la página y que NO LOS DEJE CERRARLA DANDOLE CLICK FUERA DEL MODAL. Pero por más que he intentado con otras soluciones, no he dado pie con bola y ya es estresante.

    <!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta charset="UTF-8">
      <title>Velebit Travel Gallery || Inicio</title>
      <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/iconos/css/velebit-embedded.css">
      <link rel="stylesheet" href="css/iconos/css/velebit.css">
      <link rel="icon" href="media/favicon.ico" type="image/x-icon">

    </head>
    <body>
        <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="staticBackdropLabel">¡Work in progress!</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      ¡Lo sentimos! Esta página todavía se encuentra en construcción, y ninguno de sus contenidos está listo para ser consumido.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-danger">Volver al inicio</button>
                    </div>
                  </div>
                </div>
              </div>
          <script type="text/javascript">
           $(function(){
            $("#myModal").modal();
           });
          </script>



          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
          <script src="Bootstrap/js/bootstrap.min.js"></script>
          <script src="JavaScript/main.js"></script>
        </body>
    </html>

¡Gracias, me quitáis un embrollo de cabeza bastante feo.

1
  • 3
    debes escribir $(document).ready(function(){ $('#myModal').modal('show'); }); observa que faltaba el parámetro 'show' y debías usar ready() para asegurar que toda la página haya cargado
    – quevedo
    el 8 dic. 2019 a las 5:41

2 respuestas 2

0

Para abrir la modal al terminar la carga de la pagina, utiliza $(document).ready. Para evitar el cierre de la modal, las propiedades son: keyboard y backdrop.

$(document).ready(function(){

    $('#myModal').modal({backdrop: 'static', keyboard: false});  
});
0

la funcionalidad de $(document).ready(callback) es la de ejecutar funciones una vez cargada en su totalidad una página web.Y para mostrar el modal bastará con invocar el método .modal()

$(document).ready(
  function (){
    $('#myModal').modal();
  }
);

Si quieres que se ejecute un tiempo después usa un timing

$(document).ready(
  function (){
    // Se mostrara el modal 1segundo despues de haber cargado la pagina
    setTimeout(
        function(){
            $('#myModal').modal();
        }, 1000);

  }
);
0

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.