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>

This is my login and message div code:

<p>

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

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

</p>

<p>

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

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

</p>

<p>

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

</p>

</div>

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

</div>

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

Now write button click events:

$(document).ready(function () {

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

$("#loginDiv").show();

$("#loginDiv").dialog();

});

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

$("#loginDiv").hide();

$("#messageDiv").show();

$("#messageDiv").dialog();

});

</script>

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.