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">×</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.