Introduction: In this article i am going to share the code trick to close/hide 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.
 |
| 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 clicking the background i.e. outside the popup window using JavaScript.
Ajax ModalPopupExtender example to open login form in popup window in asp.net
In previous related articles i explained How to Close Ajax ModalPopUpExtender control on esc key press in asp.net and 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 Message box in asp.net website using JavaScript and Show jQuery tooltip message on mouse over and Open Pop up window on Drop down selection and Highlight asp.net textbox,dropdownlist controls on validation failure error
While working on asp.net project it was required to open the login form in popup and close that popup on clicking on the background outside the popup window. So i used Ajax ModalPopUpExtender control to open the login panel in popup and used the javascript to close/hide the popup.
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() {
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. 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() {
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> 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 Background click 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."
2 comments
Click here for commentshi lalit,
Replyyour posts are always awesome. Can you please show me the web-method of Login button where i can enter in a specific page using my valid user id and password which retrieve from a database.
thanks...
Hello angshu44..check the following articles:
Replyhttp://www.webcodeexpert.com/2013/09/how-to-create-login-formpage-and.html
http://www.webcodeexpert.com/2013/08/how-to-create-login-pageform-and-check.html
http://www.webcodeexpert.com/2013/02/how-to-pass-parameter-to-stored.html
If 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..