Click here to Skip to main content
Click here to Skip to main content

How to Show Modal Pop Up without giving value of TargetControlId and changing the background colour.

, 9 Mar 2014
Rate this:
Please Sign up or sign in to vote.
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


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Santosh Kumar Chhotaray
Software Developer
India India
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 10 Mar 2014
Article Copyright 2014 by Santosh Kumar Chhotaray
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid