Introduction:
While
working in asp.net, sometime it is required to open the login form in popup and close that popup on
escape key press. Ajax ModalPopUpExtender
control can be used to open the login panel in popup and used the javascript
to close/hide the popup on escape key press.
In this article I will explain how to
close/hide modal popup extender control of Ajax on keyboard’s Escape key press in
asp.net using JavaScript.
Steps we will cover in this article:
Steps we will cover in this article:
- Open login form
in popup window using Ajax ModalpopUpExtender control.
- Apply CSS style to make
ModalPopUpExtender look better.
- Close/ Hide Modal Pop Up on escape button press using javaScript.
Source Code:
Following javascript will be used 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>
Full Source Code:
Now, Let's create login form. 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.
Place following JavaScript in Head Section of
the page:
<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>
Design Section:
<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>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
This line will be added
automatically on the top of the design page when we add any ajax control on page.
Now using
this reference application, create your own application and run the application.
There will be a link of Login on the page. 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.
0 comments:
Post a Comment