Click here to Skip to main content
11,705,610 members (46,592 online)
Click here to Skip to main content

Tagged as

jQuery Dialog in ASP.NET Master Page

, 4 Jun 2013 CPOL 23.3K 16
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'm a Software Engineer.
blog

You may also be interested in...

Comments and Discussions

 
Questiondoes't work well in my project Pin
paul_cheung5-Jun-13 16:34
memberpaul_cheung5-Jun-13 16:34 
AnswerRe: does't work well in my project Pin
Muhammad Hussain Tabassum5-Jun-13 21:10
memberMuhammad Hussain Tabassum5-Jun-13 21:10 
GeneralRe: does't work well in my project Pin
paul_cheung5-Jun-13 22:08
memberpaul_cheung5-Jun-13 22:08 
GeneralRe: does't work well in my project Pin
Muhammad Hussain Tabassum5-Jun-13 22:14
memberMuhammad Hussain Tabassum5-Jun-13 22:14 
GeneralRe: does't work well in my project Pin
paul_cheung6-Jun-13 1:33
memberpaul_cheung6-Jun-13 1:33 
GeneralRe: does't work well in my project Pin
Muhammad Hussain Tabassum6-Jun-13 1:52
memberMuhammad Hussain Tabassum6-Jun-13 1:52 
GeneralRe: does't work well in my project Pin
paul_cheung6-Jun-13 2:34
memberpaul_cheung6-Jun-13 2:34 
GeneralRe: does't work well in my project Pin
Muhammad Hussain Tabassum6-Jun-13 3:15
memberMuhammad Hussain Tabassum6-Jun-13 3:15 
GeneralRe: does't work well in my project Pin
paul_cheung19-Jun-13 21:41
memberpaul_cheung19-Jun-13 21:41 
GeneralRe: does't work well in my project Pin
Muhammad Hussain Tabassum19-Jun-13 22:36
memberMuhammad Hussain Tabassum19-Jun-13 22:36 
GeneralRe: does't work well in my project Pin
paul_cheung20-Jun-13 0:02
memberpaul_cheung20-Jun-13 0:02 
wonderful! and I wish this would be the last question Big Grin | :-D , so sorry to trouble you: when I encountered an issue and got solution later, now in order to address the same issue next time, what would you do for this purpose? your instant reply causes this problem, this is just my curiosity for how to study or solve problem efficiently! your methodology will be highly appreciated!Rose | [Rose]

________________________________________________________
keep my eyes closed and you will never find me.
GeneralRe: does't work well in my project Pin
Muhammad Hussain Tabassum4-Jul-13 21:38
memberMuhammad Hussain Tabassum4-Jul-13 21:38 
GeneralRe: does't work well in my project Pin
paul_cheung5-Jul-13 18:22
memberpaul_cheung5-Jul-13 18:22 
GeneralMy vote of 5 Pin
Jayanta Chatterjee5-Jun-13 4:15
memberJayanta Chatterjee5-Jun-13 4:15 
GeneralRe: My vote of 5 Pin
Muhammad Hussain Tabassum5-Jun-13 4:54
memberMuhammad Hussain Tabassum5-Jun-13 4:54 
GeneralMy vote of 5 Pin
Gun Gun Febrianza4-Jun-13 8:51
member Gun Gun Febrianza4-Jun-13 8:51 
GeneralRe: My vote of 5 Pin
Muhammad Hussain Tabassum4-Jun-13 20:58
memberMuhammad 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 | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 4 Jun 2013
Article Copyright 2013 by M.Hussain.
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid