jQuery Dialog in ASP.NET Master Page

• Download sample solution

Introduction

Web developers have been enjoying the elegance of jQuery over the years. Many of us have used jQuery Dialog for different purposes.

In this post, I’m trying to show how you can easily integrate it in your master page. You’ll need to import the jQuery core and UI libraries before this dialog code. Define the dialog code in the head section of the master page. If you want to know all of its properties and configurations, then you can find the documentation here.

<script type="text/javascript">
$(function () {var dialogDefine = $("#divLoginDialog").dialog({
       autoOpen: false,
       modal: true,
       closeOnEscape: true,
       draggable: false,
       resizable: false,
       position: [350, 250],
       title: "Login",
       overlay: "background-color: black; opacity: 90",
       buttons: {
       Cancel: function(){ $(this).dialog('close');},
       Ok: function () { /*Call your custom validation code;*/ }}
}); //end dialog
$("#hlkShowLogin").click(function () {
    $("#divLoginDialog").dialog('open');
    $("#divLoginDialog").parent().appendTo($("form:first"));
    return;
});
});//end Jquery
</script>

The hyperlink which will show the dialog is like:

<a href="#" id="hlkShowLogin" 
class="link">Login</a>

Here’s the login dialog HTML. In this post, I’ve used jQuery buttons, but you can use ASP.NET buttons.

EDIT:: Sample project has now ASP.Net buttons not jQuery dialog buttons.

<div id="divLoginDialog" style="display: none;">
<table cellspacing="0" cellpadding="2">
<tr>
<td class="label">User Name:</td>
<td>
<asp:TextBox ID="txtUserName" ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="User name required" 
ControlToValidate="txtUserName" runat="server" />
</td>
</tr>
<tr>
<td class="label">Password:</td>
<td>
<asp:TextBox ID="txtPassword" Mode="password" 
ClientIDMode="Static"  runat="server"/>
<asp:RequiredFieldValidator ErrorMessage="Password required" 
ControlToValidate="txtPassword" runat="server" />
</td>
</tr>
</table>
</div>

You can download the sample solution in ASP.NET.