In this article I will explain with an example, how to automatically close jQuery UI Dialog Modal Popup box after delay of 5 seconds (some seconds) using the JavaScript setTimeout function.
Automatically close jQuery UI Dialog Modal Popup after delay 5 seconds (some seconds)
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box, an HTML DIV and a Button.
Inside the jQuery document ready event handler, the Button has been assigned a jQuery click event handler. When the Button is clicked, the jQuery UI Dialog Modal Popup box is initialized.
Inside the Open event handler of the jQuery UI Dialog Modal Popup box, using the JavaScript setTimeout function and the jQuery UI Dialog “close” command, the jQuery UI Dialog Modal Popup box is set to automatically close after delay of 5 seconds (some seconds).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: "jQuery Dialog",
width: 300,
height: 150,
open: function (event, ui) {
setTimeout(function () {
$("#dialog").dialog("close");
}, 5000);
}
});
});
});
</script>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none">
This dialog will automatically close in 5 seconds.
</div>
Screenshot
![Automatically close jQuery UI Dialog Modal Popup after delay 5 seconds (some seconds)]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
