Introduction: In this article i
am going to share the code trick to close/hide modal popup extender control of
Ajax on keyboard's Escape key press in asp.net using JavaScript.
 |
| Click on image to enlarge |
Description: Basically you will
learn the following through this article:
- How to open login form in popup window using Ajax ModalpopUpExtender control.
- How to apply CSS style to make ModalPopUpExtender look better.
- How to Close/ Hide Modal Pop Up on escape button press using javaScript.
Ajax ModalPopupExtender example to open login form in popup window in asp.net
In previous related articles i explained How to Create login form/page and implement remember me next time checkbox and Create Login page/form and check username,password in asp.net using stored procedure and Show jQuery notification pop up message box and hide after 5 seconds in asp.net and Show message box and redirect to another page/website and Best example to implement stylish jQuery form validations and Open and close pop up window in asp.net using javascript
While working on asp.net project it was required to open the login form in popup and close that popup on escape key press. So i used Ajax ModalPopUpExtender control to open the login panel in popup and used the javascript to close/hide the popup on escape key press.
Implementation: Let's create a
demo website page to implement this functionality.
- You need to place the following javascript in the Head tag of the asp.net design page(.aspx) to close the modal popupextender.
<script type="text/javascript">
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
//
adding handler to the document's keydown event
$addHandler(document, "keydown",
onKeyDown);
}
}
function onKeyDown(e) {
if (e && e.keyCode ==
Sys.UI.Key.esc) {
// if the key pressed is the escape key,
then close the dialog
$find('ModalPopupExtender1').hide();
}
}
</script>
- Let's create login form and suppose we want to open this login form in popup on click of login link. So we can use Ajax ModalpopUpExtender control for this purpose. Below is the full code.
In
the < Head > tag of
the asp.net design page(.aspx) place the below
javascript as:
<head runat="server">
<title></title>
<script type="text/javascript">
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
//
adding handler to the document's keydown event
$addHandler(document, "keydown",
onKeyDown);
}
}
function onKeyDown(e) {
if (e && e.keyCode ==
Sys.UI.Key.esc) {
// if the key pressed is the escape key,
then close the dialog
$find('ModalPopupExtender1').hide();
}
}
</script>
// Add following CSS Style to give style
to popup
<style type="text/css">
#loginform
{
min-width:200px;
height:110px;
background-color:#ffffff;
border:1px solid;
border-color:#555555;
padding:16px 16px;
border-radius:4px;
-webkit-box-shadow: 0px
1px 6px rgba(75, 31, 57, 0.8);
-moz-box-shadow:0px 1px 6px rgba(75, 31, 57, 0.8);
box-shadow: 0px 1px 6px rgba(223, 88, 13, 0.8);
}
.modalBackground
{
background-color:#cad1d0;
filter:alpha(opacity=80);
opacity:0.8;
}
.txt
{
color:#505050;
}
.redstar
{
color: #FF0000;
}
</style>
</head>
- Now in the <body> tag of the asp.net design page(.aspx) design the page as:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<table>
<tr>
<td width="1100px"
height="600px"
align="center"
valign="middle">
<asp:HyperLink ID="btnLogin"
runat="server"
NavigateUrl="#">Login</asp:HyperLink></td>
</tr>
</table>
<asp:ModalPopupExtender
ID="ModalPopupExtender1"
TargetControlID="btnLogin"
PopupControlID="popUpPanel"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground"
DropShadow="true"
runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="popUpPanel"
runat="server">
<div id="loginform">
<table>
<tr>
<td><span class="txt">Username:
</span><span class="redstar">*</span></td>
<td><asp:TextBox ID="txtUserName"
runat="server"
placeholder="
UserName"
Width="186px"></asp:TextBox>
<asp:RequiredFieldValidator
ID="rfvUserName"
runat="server"
ErrorMessage="Please enter
User Name" ControlToValidate="txtUserName"
Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><span class="txt">Password:
<span class="redstar">*</span> </span></td><td><asp:TextBox ID="txtPwd" runat="server"
TextMode="Password"
placeholder="
Password" Width="186px"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtPwd"
Display="Dynamic"
ErrorMessage="Please
enter Password" ForeColor="Red" SetFocusOnError="True"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td></td><td><asp:Button ID="btnSubmit"
runat="server"
Text="Login"
/><asp:Button ID="btnClose"
runat="server"
Text="Close"
CausesValidation="false"
/></td>
</tr>
<tr>
<td> </td><td><span class="txt"> New User? Click Here For</span> <a href="#">Sign Up</a><b></b></td>
</tr>
</table>
</div>
</asp:Panel>
</div>
</form>
</body>
Note: Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing ModalPopupExtender control on design page.
Now run the application. You will see a login link. Click on it and login form will be opened in popup. You can close it by clicking on the close button or by pressing escape key from your keyboard.
Now over to you:
" I hope you have got the way to open the popup using ajax modalpopupextender and close that on escape key press using javascript in asp.net and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
5 comments
Click here for commentsGreat Work Lalit .
ReplyThanks Jayaprakash Tatagari for appreciating my work..i am glad you found this article useful..stay connected and keep reading for more useful updates like this...:)
ReplyNice one
ReplyThanks Sushant for your feedback..keep reading..
Reply$find('<%=modalWindow.ClientID%>').hide();
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..