Introduction:
When working with modal popup extender it is needed to close pop
up on clicking outside the popup window. This can be done by using Javascript
or Jquery. In this article I am using Javascript to close the pop up window.
In this article i am going to share the code trick to close modal
popup extender control of Ajax on clicking on the screen outside the popup
window i.e. on clicking of the background outside the popup in asp.net using
JavaScript.
In
this article I will explain following things:
1.
Open login form in popup window using Ajax ModalpopUpExtender
control.
2.
Apply CSS style to make ModalPopUpExtender look attractive and
professional.
3.
Close/Hide Modal Pop Up on clicking the background i.e. outside
the popup window using JavaScript.
In this example I have open the login form in popup and close that popup on clicking on the background outside the popup window. I used Ajax ModalPopUpExtender control to open the login panel in popup and used the javascript to close/hide the popup.
Use the following javascript code in Head Section of the page to close the modal popupextender.
<script type="text/javascript">
function pageLoad()
{
var mpe
= $find("ModalPopupExtender1");
mpe.add_shown(onShown);
}
function onShown()
{
var background
= $find("ModalPopupExtender1")._backgroundElement;
background.onclick = function () { $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 i.e. Hyperlink.
Full
Source 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()
{
var mpe
= $find("ModalPopupExtender1");
mpe.add_shown(onShown);
}
function onShown()
{
var background
= $find("ModalPopupExtender1")._backgroundElement;
background.onclick = function () { $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> Section 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>
Following directives will automatically be added to the page when
we place ModalPopUpExtender on page,
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
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.
0 comments:
Post a Comment