How to Show Modal Pop Up without giving value of TargetControlId and changing the background colour.
This trick is about how to change background colour of a popup window by using modal pop up extender.
Introduction
In my project in
contact us form, after submitting all contact form value a pop up will come and
says like "Thanks for contacting us”. I was used normal pop up screen to
show this. But one of our client told to change the background colour to yellow
of that pop screen. Then I tried a lot to change the colour in that pop up. I
have tried and searched a lot to do, but unable to find any good solution for that.
Then I tried with Ajax modal pop up extender, then I successed to do that. But important
thing is TargetControlId of that modal pop up extender that is without giving
id of submit button it has to show the pop up because before that pop up some
code has to execute. Here is the code.
Using the code
ASPX Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal Pop Up Extender</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function validation() {
if (document.getElementById("txtName").value == " " || document.getElementById("txtName").value == "Name:")
{
alert('Please enter your name.');
document.getElementById("txtName").focus();
return false;
}
if (document.getElementById("txtMobile").value == "" || document.getElementById("txtMobile").value == "Mobile:") {
alert('Please enter your mobile number.');
document.getElementById("txtMobile").focus();
return false;
}
if (document.getElementById("txtEmail").value == "" || document.getElementById("txtEmail").value == "Email:") {
alert("Please enter your email!");
document.getElementById("txtEmail").focus();
return false;
}
var emailPat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
//var emailPat = /(^[0-9][0-9a-z_\.]*)|(^[a-z]([a-z0-9_\.]*)@([a-z0-9][a-z0-9-_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z0-9_\.]*)@([a-z0-9][a-z0-9-_\.]*)(\.[a-z]{2,4})(\.[a-z]{2})*$)/i;
var emailid = document.getElementById("txtEmail").value;
var matchArray = emailid.match(emailPat);
if (matchArray == null) {
alert("Your email address seems incorrect. Please try again.");
document.getElementById("txtEmail").focus();
return false;
}
if (document.getElementById("txtMessege").value == "" || document.getElementById("txtMessege").value == "Message:") {
alert('Please enter your message .');
document.getElementById("txtMessege").focus();
return false;
}
if (document.getElementById("txtCaptcha").value == "" || document.getElementById("txtCaptcha").value == "Captcha:") {
alert("Please enter the code shown!");
document.getElementById("txtCaptcha").focus();
return false;
}
var a = document.getElementById("txtCaptcha").value;
var b = document.getElementById("txt1").value;
if (a != b) {
alert("Please enter the exact code shown! ");
document.getElementById("txtCaptcha").value = "";
document.getElementById("txtCaptcha").focus();
return false;
}
}
function CheckIt(X, ABC) {
a = 0;
FL = ABC.slice(0, 1);
LL = ABC.slice(ABC.length - 1, ABC.length);
if (FL == " ") { ABC = ABC.slice(1, ABC.length); a = 1; }
if (LL == " ") { ABC = ABC.slice(0, ABC.length - 1); a = 1; }
X.value = ABC;
if (a != 0) { CheckIt(X, ABC) }
}
function isNumeric(keyCode) {
if (keyCode == 16)
isShift = true;
return ((keyCode >= 48 && keyCode <= 57 || keyCode == 8 || keyCode == 9 || keyCode == 46 || keyCode == 33 | keyCode == 34 || keyCode == 35 || keyCode == 36 || keyCode == 37 || keyCode == 39 ||
(keyCode >= 96 && keyCode <= 105)) && isShift == false);
}
var isShift = false;
function keyUP(keyCode) {
if (keyCode == 16)
isShift = false;
}
</script>
<script type="text/javascript">
function clickButton(e, btnSubmit)
{
var evt = e ? e : window.event;
var bt = document.getElementById(btnSubmit);
if (bt) {
if (evt.keyCode == 13) {
bt.click();
return false;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:toolkitscriptmanager id="ScriptManager1" runat="server">
<div>
<div class="contact-col lr-margin maxheight">
<h5>Contact Form</h5>
<div id="ContactForm">
<label>
<input type="text" runat="server" name="txtName" id="txtName" maxlength="25" onchange="CheckIt(this,this.value)" onkeyup="nospaces(this)" onkeypress="return clickButton(event,'btnSubmit')" value="Name:" onblur="if(this.value=='') this.value='Name:'" onfocus="if(this.value=='Name:') this.value=''" />
</label>
<label>
<input type="text" runat="server" name="txtPhone" id="txtPhone" onkeyup="keyUP(event.keyCode)" onkeydown="return isNumeric(event.keyCode);" maxlength="12" onkeypress="return clickButton(event,'btnSubmit')" value="Phone:" onblur="if(this.value=='') this.value='Phone:'" onfocus="if(this.value=='Phone:') this.value=''" />
</label>
<label>
<input type="text" runat="server" name="txtMobile" id="txtMobile" onkeyup="keyUP(event.keyCode)" onkeydown="return isNumeric(event.keyCode);" maxlength="12" onkeypress="return clickButton(event,'btnSubmit')" value="Mobile:" onblur="if(this.value=='') this.value='Mobile:'" onfocus="if(this.value=='Mobile:') this.value=''" />
</label>
<label>
<input type="text" runat="server" name="txtEmail" id="txtEmail" onkeyup="nospaces(this)" onkeypress="return clickButton(event,'btnSubmit')" value="Email:" onblur="if(this.value=='') this.value='Email:'" onfocus="if(this.value=='Email:') this.value=''" />
</label>
<label>
<textarea rows="1" runat="server" cols="1" name="txtComments" id="txtMessege" onchange="CheckIt(this,this.value)" value="Message:" onblur="if(this.value=='') this.value='Message:'" onfocus="if(this.value=='Message:') this.value=''" />
</label>
<div class="field_row alignright">
<asp:button id="btnSubmit" runat="server" text="Submit" value="Send" onclientclick="return validation();" onclick="btnSubmit_Click">
<asp:button id="btnReset" runat="server" text="Reset" value="Clear" onclick="btnReset_Click">
<asp:modalpopupextender id="ModalPopupExtender1" cancelcontrolid="BtnClose" targetcontrolid="btnDummy" runat="server" popupcontrolid="modalpopup" backgroundcssclass="modalBackground">
</asp:modalpopupextender>
<asp:panel id="modalpopup" style="display: none;" runat="server">
<div class="modalpop">
<p style="font-family: Calibri;">
Thanks for contacting us.
<asp:button id="btnDummy" runat="server" style="display: none;">
<asp:button id="BtnClose" runat="server" text="Ok">
</asp:button></asp:button>
</p></div>
</asp:panel>
</asp:button>
</form>
</body>
</html>
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Do ur coding here
txtName.Value = "Name:";
txtPhone.Value = "Phone:";
txtMobile.Value = "Mobile";
txtEmail.Value = "Email:";
txtMessege.Value = "Message:";
txtCaptcha.Text = "Captcha:";
this.ModalPopupExtender1.Show();
}
protected void btnReset_Click(object sender, EventArgs e)
{
txtName.Value = "Name:";
txtPhone.Value = "Phone:";
txtMobile.Value = "Mobile";
txtEmail.Value = "Email:";
txtMessege.Value = "Message:";
txtCaptcha.Text = "Captcha:";
}
Points of Interest
Here you have to mark for TargetControlId of the modal pop up extender in .aspx file