cnxmax
asked on
Use JavaScript/CSS to Dynamically Center a Popup DIV
I need some simple CSS/Javascript that will pop up a div on the center of the screen. The problem I'm having is that I can't make it happen 1) above everything else without messing up the document flow 2) be positioned right on the screen regardless of how far down the screen is scrolled.
Basically have this:
========================== ========== ========== ====
========================== ========== ========== ====
<style>
#popimg
{
left: 200px;
top: 200px;
width: 500px;
height: 350px;
background-color: #FF0000;
position: absolute;
}
</style>
<div id="popimg">
Here's the Div
</div>
========================== ========== ========== ====
========================== ========== ========== ====
So, what this is lacking is dynamic horizontal and vertical position, and keep in mind that I need it to work if the user is at the top of the page, or if they are scrolled half way down a long page. I'm assuming that with JavaScript somehow I can dynamically set the top and left for popimg.
Basically have this:
==========================
==========================
<style>
#popimg
{
left: 200px;
top: 200px;
width: 500px;
height: 350px;
background-color: #FF0000;
position: absolute;
}
</style>
<div id="popimg">
Here's the Div
</div>
==========================
==========================
So, what this is lacking is dynamic horizontal and vertical position, and keep in mind that I need it to work if the user is at the top of the page, or if they are scrolled half way down a long page. I'm assuming that with JavaScript somehow I can dynamically set the top and left for popimg.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Not a problem cnxmax. Thanks for the A! :)
ASKER
Thanks again.