Open JQuery UI Dialog box on Button Click





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>

<asp:Button ID="btnOpenMe" runat="server" Text="Click Me to open Dialog box" />


<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 });

        $("#<%=btnOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );
    });
</script>

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