How would I set a timeout for a bootstrap modal? After getting the ajax data back that the message returned by php contains the term success
, I want to give the user the option to close the window. However, I also just want to have a 4 second count down. Currently the second the success message comes back the modal hides itself.
$('#forgotform').submit(function (e) {
"use strict";
e.preventDefault();
$('#forgotsubmit').button('loading');
var post = $('#forgotform').serialize();
var action = $('#forgotform').attr('action');
$("#message").slideUp(350, function () {
$('#message').hide();
$.post(action, post, function (data) {
$('#message').html(data);
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#usernamemail').focus();
if (data.match('success') !== null) {
$('#forgotform').slideUp('slow');
$('#forgotsubmit').button('complete');
$('#forgotsubmit').click(function (eb) {
eb.preventDefault();
$('#forgot-form').modal('hide');
});
setTimeout($('#forgot-form').modal('hide'), 10000);
} else {
$('#forgotsubmit').button('reset');
}
});
});
});
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal.
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.
When calling setTimeout(), wrap your command in an anonymous function. Otherwise the command will be executed immediately.
setTimeout(function() {$('#forgot-form').modal('hide');}, 4000);
setTimeout(function(){
$('#Modal').modal('hide')
}, 4000);
//where modal's id is 'Modal'
The following code is used for hiding the model on an onClick
event. Use the classname for the onClick
listener and the modal id as the selector to hide.
$('.class_name').on('click',function(){
$('#modal_id').modal('hide');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With