Kind regards colleagues
As the title of the question says, I want that when pressing the button to close the modal window, it does not close immediately, but has a delay
waiting time of a few seconds, three for example, this is because inside the body of the modal will perform operations that the user needs to view.
<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>
Doing some research I found this example:
var $modalDialog = $("#myModal");
setTimeout(function() {
$modalDialog.modal('hide');
}, 3000);
But what it does is close immediately and then when it reopens it takes three seconds, strange.
I also found this other one:
window.setTimeout(function(){
$('#myModal').modal('hide');
}, 3000);
But it didn't work either, it closed immediately.
I'm using Bootstrap version 3.3.7 and jQuery 1.12.4 , I don't know if it has something to do with it.
Blessings in advance for your valuable collaboration.
It occurs to me to use a JS function that captures the click, does the delay and then continues with the normal closing of the modal, try this:
With jquery you can capture the moment in which the modal will close, then you prevent the event, and make it close in 3 seconds, the validation variable is necessary so that after 3 seconds it closes.