Open and Auto Close JQuery UI Dialog box on Fly



Click Me to Open and auto close Dialog Box
Please wait for 5 Seconds and JQuery UI Dialog box will auto close.

This is My Dialog box Description/Content

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.



Sourcode

   
 
<html>
<head>

<!--Include Web Project Style File (If any)-->
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

<!--Include JQuery Style File-->
<link href="~/Styles/css/sunny/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />

<!--Include JQuery File-->
<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!--Include JQuery UI File-->
<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

</head>
<body>

<a id="hlOpenMe" runat="server" href="#">Click Me to Open and auto close Dialog Box</a>
<br />
<b>Please wait for 5 Seconds and JQuery UI Dialog box will auto close.</b>
<br /><br />
<div id="dialog" title="My Dialog Title">
    <p>This is My Dialog box Description/Content</p>    
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false });

        $("#<%=hlOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');

                //Change content on the fly
                ChangeMessage("Welcome to JQueryUI Dialog Box Example");

                //Auto Close JQueryUI Dialog Box
                AutoCloseDialogBox(5000);
                return false;
            }
        );

        function ChangeMessage(Message) {            
            $("#dialog").html(Message);
        }

        function AutoCloseDialogBox(WaitSeconds) {
            //Auto Close Dialog Box after few seconds
            setTimeout(
                function () {
                    $("#dialog").dialog("close");
                }, WaitSeconds);
        }
    });
</script>


</body>
</html>
Share with your friends!!