JavaScript Popup: Display Position

Question

4.00/5 (1 vote)

See more:

XML

<asp:Button ID="Button2" runat="server" Text="Show Custome-Popup" onclick="Button2_Click" />
 <div align ="center" id="popup1" style =" background-color :Fuchsia; width :265px; height :183px; display :none">
 popup message
 </div>

//==================================================Code behind=====

C#

protected void Button2_Click(object sender, EventArgs e)
    {
        string javaScript = "<script language=JavaScript>\n" +
                        "var obj = document.getElementById('popup1');\n" +
                        "obj.style.display = 'block';\n" +
                        "</script>";
        ClientScript.RegisterStartupScript(this.GetType(), "Button2_Click", javaScript);
    }

//============================================================
Pop is displaying perfectly.
But it is displaying below all the other existing controls like textBox, label etc.
How can I display it in the centre of the screen over all other controls.

Posted 13-Apr-11 7:08am

SHAJANCHERIAN

Add a Solution

2 solutions

Solution 2

Thank You Pankaj..
Completed code is as follows..
//================in .aspx page=========================
<asp:Button ID="Button2" runat="server" Text="Show Custome-Popup" onclick="Button2_Click" />

XML

<div align ="center"  id="popup1" style ="z-index:10000; background-color :Fuchsia; width :265px; height :183px; display :none;">
 popup message
 </div>

//==============Code Behind======================

XML

protected void Button2_Click(object sender, EventArgs e)
    {
        string javaScript = "<script language=JavaScript>\n" +
                        "var obj = document.getElementById('popup1');\n" +
                        "obj.style.position = 'absolute';\n" +
                        "obj.style.top = '100px'; \n" +
                        "obj.style.left = '500px'; \n" +
                        "obj.style.display = 'block';\n" +
                        "</script>";
        ClientScript.RegisterStartupScript(this.GetType(), "Button2_Click", javaScript);
    }

Posted 13-Apr-11 19:30pm

SHAJANCHERIAN

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

pankajupadhyay29 · Accepted Answer · 2011-04-13T07:24:00

Solution 1

increase the z-index of popup1 style="z-index:10000;"

this will bring the popup above all controls.

Change your html as

XML

<div align="center" id="popup1" style="z-index:10000; removed:absolute; background-color :Fuchsia; width :265px; height :183px; display :none;">
 popup message
 </div>

and change javascript as

Java

document.getElementById("popup1").style.position = "absolute";
document.getElementById("popup1").style.top = "100px";
document.getElementById("popup1").style.left = "100px";
document.getElementById("popup1").style.display = "block";

--Pankaj

Posted 13-Apr-11 7:24am

pankajupadhyay29

Updated 13-Apr-11 18:54pm

v2

Comments

SHAJANCHERIAN 14-Apr-11 0:40am

I have included the z-index... But there is no effect..
<div align ="center" id="popup1" style ="z-index:10000; background-color :Fuchsia; width :265px; height :183px; display :none;">
popup message
</div>
any other idea?

pankajupadhyay29 14-Apr-11 0:56am

ok I got your point below means positionly below i thought in the layer below.
Ok I make the changes for that in solution, hope this will work

pankajupadhyay29 14-Apr-11 0:58am

I put the top and left hardcoded 100px you can change this by calculating screen height and width and then position for popup

SHAJANCHERIAN 14-Apr-11 1:25am

Thank U Pankaj..its working Fine.

pankajupadhyay29 14-Apr-11 1:41am

your welcome if this works for you then mark this as answer

SHAJANCHERIAN 14-Apr-11 2:10am

done