Link to home
Start Free TrialLog in
Avatar of ALawrence007
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
<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>

Open in new window

Avatar of zivperry
zivperry
Flag of Israel image

You have to use Javascript to re-allocate the div. CSS is not enough in this case.

ASKER CERTIFIED SOLUTION
Avatar of scrathcyboy
scrathcyboy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ALawrence007
ALawrence007

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:

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/visuren.html#absolute-positioning



zivperry, the way he's using it, it does, containing block is the body, hence top left.