jQuery Dialog

This article demonstrates how to use the jQuery dialog feature in ASP.Net.

You can download the jQuery files from here: http://jqueryui.com/

First of all make a new website in ASP.Net and add a new stylesheet and add .js files and put images in the images folder and make a reference to the page.

<title>JQuery Dialog</title>

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

<script src="js/jquery-ui.js" type="text/javascript"></script>

You can find scripts and stylesheets online from here:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

This is my login and message div code:

<div id="loginDiv" title="Login Dialog" style="display:none;">


            <asp:Label ID="lblEMail" runat="server" Text="Email: "></asp:Label>

            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>



            <asp:Label ID="lblPassword" runat="server" Text="Password: "></asp:Label>

            <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>



            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />



    <div id="messageDiv" title="Message Dialog"  style="display:none;">Successfully Logged In.


    <a href="#" id="openDialog">Click here to open dialog</a>

Now write button click events:


        $(document).ready(function () {

            $("#openDialog").bind('click', function () {





            $("#btnSubmit").bind('click', function () {








Now run the application to see the result.

When the link button is clicked this dialog will open:


Image 1.

When the submit button is clicked the message dialog will be opened, as in:


Image 2.

For more information, please download the attached sample application.