In this article I will explain with an example, how to open jQuery UI Dialog Modal Popup box after delay of 2 seconds (some seconds) using the JavaScript setTimeout function.
Open jQuery UI Dialog Modal Popup after some delay
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 jQuery UI Dialog Modal Popup box is initialized and the Button has been assigned a jQuery click event handler.
When the Button is clicked, the jQuery UI Dialog Modal Popup box is opened after delay of 2 seconds using the JavaScript setTimeout function and the jQuery UI Dialog “open” command.
<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 () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 300,
height: 150
});
$("#btnShow").click(function () {
setTimeout(function () {
$("#dialog").dialog("open");
}, 2000)
});
});
</script>
<input id="btnShow" type="button" value="Show Popup" />
<div id="dialog" style="display: none">
This is a jQuery Dialog.
</div>
Screenshot
![Open jQuery UI Dialog Modal Popup after some delay]()
Demo
Downloads
