2

Cordial Saludo compañeros

Como dice el título de la pregunta, deseo que al presionar sobre el botón para cerrar la ventana modal, ésta no se cierre de inmediato, sino que tenga un delay o tiempo de espera de unos segundos, tres por ejemplo, esto porque dentro del cuerpo del modal se van a realizar operaciones que necesita el usuario visualizar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<!-- Button trigger modal -->
<button type="button" 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">
        Al pulsar cerrar, deben pasar 3 segundos, y luego sí, cerrarse el modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

Investigando un poco encontré este ejemplo:

var $modalDialog = $("#myModal");

setTimeout(function() {
  $modalDialog.modal('hide');
}, 3000);

Pero lo que hace es cerrarse de inmediato y luego al volver a abrir tardar los tres segundos, extraño.

También hallé este otro:

window.setTimeout(function(){
     $('#myModal').modal('hide');
  }, 3000);

Pero tampoco daba resultado, se cerraba de inmediato.

Estoy utilizando Bootstrap en su versión 3.3.7 y jQuery 1.12.4, no sé si tenga algo que ver.

De antemano Bendiciones por su valiosa colaboración.

2 respuestas 2

2

Con jquery puedes capturar el momento en el que el modal se cerrara, luego previenes el evento, y haces que en 3 segundos se cierre, la variable validacion es necesaria para que despues de los 3 segundos se cierre.

  $(document).ready(function() {
    var validacion = true;
    $('#myModal').on('hide.bs.modal', function(e) {
      if (validacion) {
        e.preventDefault();
        validacion = false;
        setTimeout(function() {
          $('#myModal').modal("hide");
        }, 3000);
      } else {
        validacion = true;
      }
    });
  });
2

Se me ocurre usar una función de JS que capture el click, haga el delay y luego continúe con el cierre normal del modal, prueba así:

function cerrar(){
  function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
      currentDate = Date.now();
    } while (currentDate - date < milliseconds);
  }
  sleep(3000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" 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">
        Al pulsar cerrar, deben pasar 3 segundos, y luego sí, cerrarse el modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="cerrar();">Cerrar</button>
      </div>
    </div>
  </div>
</div>

1
  • 1
    El problema de hacer un bucle que compare fechas es que no es óptimo. Se lleva a cabo la operación de la diferencia a cada ciclo y bloquea el thread. Javascript ya tiene un método setTimeout que hace exactamente eso, en el background.
    – VRoxa
    Commented el 23 abr. 2020 a las 8:39

Tu Respuesta

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

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