Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

jQuery Dialog in ASP.NET Master Page

, 4 Jun 2013
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

M.Hussain.
Software Developer (Senior)
United States United States
My name is Muhammad Hussain. I am a Software Engineer.
blog

Comments and Discussions

 
Questiondoes't work well in my project Pinmemberpaul_cheung5-Jun-13 16:34 
AnswerRe: does't work well in my project PinmemberMuhammad Hussain Tabassum5-Jun-13 21:10 
GeneralRe: does't work well in my project Pinmemberpaul_cheung5-Jun-13 22:08 
GeneralRe: does't work well in my project PinmemberMuhammad Hussain Tabassum5-Jun-13 22:14 
GeneralRe: does't work well in my project Pinmemberpaul_cheung6-Jun-13 1:33 
done:<head runat="server"> <script> pageLoad(){...} </script> </head> <body onload="pageLoad()">
the issue also exists!
sorry, im not sure i glimpsed your meaning correctly!
GeneralRe: does't work well in my project PinmemberMuhammad Hussain Tabassum6-Jun-13 1:52 
GeneralRe: does't work well in my project Pinmemberpaul_cheung6-Jun-13 2:34 
GeneralRe: does't work well in my project PinmemberMuhammad Hussain Tabassum6-Jun-13 3:15 
GeneralRe: does't work well in my project Pinmemberpaul_cheung19-Jun-13 21:41 
GeneralRe: does't work well in my project PinmemberMuhammad Hussain Tabassum19-Jun-13 22:36 
GeneralRe: does't work well in my project Pinmemberpaul_cheung20-Jun-13 0:02 
GeneralRe: does't work well in my project PinmemberMuhammad Hussain Tabassum4-Jul-13 21:38 
GeneralRe: does't work well in my project Pinmemberpaul_cheung5-Jul-13 18:22 
GeneralMy vote of 5 PinmemberJayanta Chatterjee5-Jun-13 4:15 
GeneralRe: My vote of 5 PinmemberMuhammad Hussain Tabassum5-Jun-13 4:54 
GeneralMy vote of 5 Pinmember Gun Gun Febrianza4-Jun-13 8:51 
GeneralRe: My vote of 5 [modified] PinmemberMuhammad Hussain Tabassum4-Jun-13 20:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 4 Jun 2013
Article Copyright 2013 by M.Hussain.
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid