By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,259 Members | 1,708 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,259 IT Pros & Developers. It's quick & easy.

Position a lightbox

KeredDrahcir
100+
P: 426
I've had lightbox that I'm using to show Flash videos and I'm using CSS to create the lightbox and JavaScript only to call it. The problem is, the overlay for the background only covers one screen size and the top of the page and the video displays in the middle of the overlay which means if the call for the video is too low, you have scroll up to see the video once you've clicked on it.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <title>LIGHTBOX EXAMPLE</title>
  5.         <style>
  6.         .black_overlay{
  7.             display: none;
  8.             position: absolute;
  9.             top: 0%;
  10.             left: 0%;
  11.             width: 100%;
  12.             height: 100%;
  13.             background-color: black;
  14.             z-index:1001;
  15.             -moz-opacity: 0.8;
  16.             opacity:.80;
  17.             filter: alpha(opacity=80);
  18.         }
  19.         .white_content {
  20.             display: none;
  21.             position: absolute;
  22.             top: 25%;
  23.             left: 25%;
  24.             width: 50%;
  25.             height: 50%;
  26.             padding: 16px;
  27.             border: 16px solid orange;
  28.             background-color: white;
  29.             z-index:1002;
  30.             overflow: auto;
  31.         }
  32.     </style>
  33.     </head>
  34.     <body>
  35.         <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
  36.         <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
  37.         <div id="fade" class="black_overlay"></div>
  38.     </body>
  39. </html>
I've sorted the problem partly by putting a fixed div round the lightbox but now the black overlay doesn't appear. Also the overlay only ever appared in white. Can anyone come up with a way to sort this out.

I'm quite happy to use JavaScript but I'd prefer not to.
Aug 31 '11 #1

✓ answered by KeredDrahcir

I finally sorted it. Round the lightbox I put a div that has position fixed. I put the overlay outside the box and changed the absolute position to fixed in the style.
The box going white instead a black was something in my orignal css setting all divs to have a background colour of white.

Share this Question
Share on Google+
1 Reply


KeredDrahcir
100+
P: 426
I finally sorted it. Round the lightbox I put a div that has position fixed. I put the overlay outside the box and changed the absolute position to fixed in the style.
The box going white instead a black was something in my orignal css setting all divs to have a background colour of white.
Aug 31 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.