Solved

CSS Style popup display

Posted on 2008-10-06
5
920 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:ALawrence007
  • 2
  • 2
5 Comments
 
LVL 1

Expert Comment

by:zivperry
ID: 22650525
You have to use Javascript to re-allocate the div. CSS is not enough in this case.

0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22656245
It is because you are using position: absolute -- which is always referencing to the top left of the screen.

Replace that with position:relative in all cases, and then position the popup some pixels to the right and below the link -- you play with the numbers -- until the position of the popup is correct relative to where the link is on the page.  Try it -- it will work.
0
 

Author Closing Comment

by:ALawrence007
ID: 31503428
That worked and solved my issue. Thanks
0
 
LVL 1

Expert Comment

by:zivperry
ID: 22659798
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



0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22661273
zivperry, the way he's using it, it does, containing block is the body, hence top left.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 61
Making my existing website "mobile friendly"... 10 35
Synchronizing CSS load 3 29
Unwanted gap in IE11 between header and menu 9 19
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now