Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

jQuery Dialog in ASP.NET Master Page

0.00/5 (No votes)
4 Jun 2013 1  
jQuery dialog in ASP.NET master page

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here