ModalPopupExtender in Javascript
In this article, I will explain how to use ModalPopupExtender in javascript instead of alert. Nowadays alert messages in javascript showing "Prevent this page from creating addtional dialogs" with an checkbox. If you check the checkbox and submit. The next time the validation in javascript will not work. To avoid this Use ModalPopupExtender instead of Alert
Create New website using visual studio
Download Ajax control toolkit
copy and paste the AjaxControlToolkit.dll in BIN folder
Add Reference that downloaded dll in your solution By right click Reference folder in solution explorer
Create Login page and validation in javascript.
Javascript validation alert should be in modalpop.
Add CSS for modal popup
Your aspx page should be like below:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxModalPopup.aspx.cs" Inherits="SimplePrograms.AjaxModalPopup" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
height:150px;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
padding: 0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
</style>
<script language="javascript" type="text/javascript">
function ShowModalPopup(txt) {
var txtvalue = document.getElementById("<%=Label1.ClientID%>");
txtvalue.innerHTML = txt;
$find("test").show();
return false;
}
function HideModalPopup() {
$find("test").hide();
return false;
}
function validateReg()
{
if (document.getElementById("<%=Txt_UserID.ClientID%>").value == "")
{
ShowModalPopup("Enter User ID");
// alert("Enter User ID");
document.getElementById("<%=Txt_UserID.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=Txt_Psw.ClientID%>").value == "")
{
ShowModalPopup("Enter Password");
// alert("Enter Password");
document.getElementById("<%=Txt_Psw.ClientID%>").focus();
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table cellpadding="0" cellspacing="0" border="0" width="350px" align="center">
<tr>
<td valign="middle">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" align="center" height="50px">LOGIN</td></tr>
<tr>
<td style="width: 135px">
User ID
</td>
<td valign="middle">
<asp:TextBox ID="Txt_UserID" onpaste="return false;" runat="server" Width="160px" ></asp:TextBox>
</td>
</tr>
<tr>
<td height="4px">
</td>
</tr>
<tr>
<td style="width: 135px">
Password
</td>
<td>
<asp:TextBox ID="Txt_Psw" onpaste="return false;" runat="server" TextMode="Password"
Width="160px" MaxLength="15"></asp:TextBox>
</td>
</tr>
<tr>
<td height="4px">
</td>
</tr>
<tr>
<td style="width: 135px" valign="top">
</td>
<td align="left">
<asp:Button ID="Add" runat="server" Text="Add" OnClientClick="return validateReg()"></asp:Button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="test" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="body" style="height: 150px; vertical-align: middle">
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Button ID="btnHide" runat="server" Text="OK" OnClientClick="return HideModalPopup()" />
</div>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>