How to delay display of Bootstrap 3 modal after click
12,420
Solution 1
You can delay the click of the trigger button, then activate the modal directly:
$('[data-toggle=modal]').on('click', function (e) {
var $target = $($(this).data('target'));
$target.data('triggered',true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show')
.data('triggered',false); // prevents multiple clicks from reopening
};
}, 3000); // milliseconds
return false;
});
http://jsfiddle.net/mblase75/H6UM4/
Solution 2
Use .on()
to hook into the event:
var isFirstShowCall = false;
$('#myModal').on('show.bs.modal', function (e) {
isFirstShowCall = !isFirstShowCall; // Prevents an endless recursive call
if(isFirstShowCall) {
e.preventDefault(); // Prevent immediate opening
window.setTimeout(function(){
$('#myModal').modal('show');
}, 3000)
}
});
Solution 3
window.setTimeout(function() {
$('#myModal').modal('show');
}, 5000)
For demo I used 5000 mini seconds. You can used it as per your need...
Author by
henrywright
I'm a huge WordPress fan and general geek interested in PHP, HTML and CSS. You can usually find me on Twitter @henrywright.
Updated on June 18, 2022Comments
-
henrywright almost 2 years
I'm trying to delay the display of a Bootstrap modal after the user has clicked on a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
Looking at the Bootstrap 3 documentation I can see there is a
show
event that can be hooked to but am not sure how to introduce a 3 second delay before the modal appears on screen. Hoping someone can help?