CODEWITHSUNDEEP
javascripthtmlcss
RuFFCuT
RuFFCuT

Reputation: 317

CSS won't fill view port

I have a div overlay which pops up when a link is clicked, my problem is you have to scroll to click the link, then the overlay remains at the top of the page instead of the area the user is currently looking at.

You can see it here by scrolling down and clicking on any of the links e.g. 'multiple orders 'here' and the terms and conditions at the bottom.

Here is the CSS:

  .black_overlay{
        display: none;
        position: absolute;
        /*top: 0%;
        left: 0%;
        width: 100%;
        height: 1000px; */
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        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: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 5px solid blue;
        background-color: white;
        z-index:1002;
        overflow: auto;
  }

And the JavaScript:

<a href = "javascript:void(0)" onclick =    "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'">here</a>

Upvotes: 0

Views: 72

Answers (1)

Chris
Chris

Reputation: 26888

Use position: fixed on your overlay elements (.black_overlay and .white_content) instead of position: absolute;

Upvotes: 1

Related Questions