ALawrence007
asked on
CSS Style popup display
Hi,
I am using the style below to display a popup when a user clicks on a link. This works perfect if the link is in the top of the screen. When the user scrolls down in the page and they click some other link with the same behavior the popup displays, but ... as you guessed it... still at the top of the page. In order for them to view the popup they then need to scroll to the top of the page.
How can I make this popup display relative to where the user clicks?
Thanks
I am using the style below to display a popup when a user clicks on a link. This works perfect if the link is in the top of the screen. When the user scrolls down in the page and they click some other link with the same behavior the popup displays, but ... as you guessed it... still at the top of the page. In order for them to view the popup they then need to scroll to the top of the page.
How can I make this popup display relative to where the user clicks?
Thanks
<style type="text/css">
.black_overlay
{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content
{
display: none;
position: absolute;
top: 5%;
left: 5%;
width: 70%;
height: 70%;
padding: 16px;
border: 16px solid #C0C0C0;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
You have to use Javascript to re-allocate the div. CSS is not enough in this case.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked and solved my issue. Thanks
scrathcyboy, this it a mistake.
absolute not reference to the top left of the screen, it's reference to the top left of the containing box element.
from W3:
References in this specification to an absolutely positionedelement (or its box) imply that the element's 'position' property has the value'absolute' or 'fixed'.
from: http://www.w3.org/TR/CSS21 /visuren.h tml#absolu te-positio ning
absolute not reference to the top left of the screen, it's reference to the top left of the containing box element.
from W3:
9.6 Absolute positioning
In the absolute positioning model, a box is explicitly offset withrespect to its containing block. It is removed from the normal flowentirely (it has no impact on later siblings). An absolutelypositioned box establishes a new containing block for normal flowchildren and absolutely (but not fixed) positioned descendants. However, the contents of anabsolutely positioned element do not flow around any other boxes. Theymay obscure the contents of another box (or be obscured themselves), depending on thestack levels of the overlapping boxes.References in this specification to an absolutely positionedelement (or its box) imply that the element's 'position' property has the value'absolute' or 'fixed'.
from: http://www.w3.org/TR/CSS21
zivperry, the way he's using it, it does, containing block is the body, hence top left.