Position a lightbox

426 256MB

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>LIGHTBOX EXAMPLE</title>

        <style>

        .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: 25%;

            left: 25%;

            width: 50%;

            height: 50%;

            padding: 16px;

            border: 16px solid orange;

            background-color: white;

            z-index:1002;

            overflow: auto;

        }

    </style>

    </head>

    <body>

        <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>

        <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>

        <div id="fade" class="black_overlay"></div>

    </body>

</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

Subscribe Post Reply

✓ 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.

3333

KeredDrahcir

426

256MB

Aug 31 '11 #2

by: RobertK | last post by:

I have a table that displays one row of images (thumbnails). When a user clicks on an image it opens up a bigger image below it. The row has about 20 cells. I have a <divtag which allows the user...

Javascript

lightbox

by: Bouzy | last post by:

I have been trying to put lightbox on my site I am making, but its not working. I have searched on forums and can't find exactly the same problem. When I click on my thumnail to open it abosolutly...

Javascript

Getting Lightbox js to work with existing js include

by: daniel | last post by:

Hello, I have limited understanding of js (css/html is more me) and when I run into complicated problems I am left undone. The person I normally call upon is on holiday so I was wondering if I...

Javascript

Slideshow Similar to Lightbox 2

by: metaphysics | last post by:

I'm attempting to create a slideshow with similar functionality as Lightbox 2. I don't want anything to pop up like the Lightbox does, I just want the slideshow to have next/previous buttons (like...

Javascript

Lightbox

by: truezplaya | last post by:

Hey I am currently creating a mash up that displays the location of some football grounds using a geoRSS feed. I was hoping to add lightbox to my mash up so i can display photos. The...

Javascript

A little Lightbox Support

by: vanald04 | last post by:

Alright, I racked my brain all last night and can't figure out what I'm doing wrong. I've copied: <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript"...

Javascript

Add lightbox to query string?

by: jrod11 | last post by:

I recently found a gallery (http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=6727&lngWId=4). The image in the gallery when clicked on will open the larger image in the same...

ASP / Active Server Pages

Lightbox in Internet Explorer 9

by: KeredDrahcir | last post by:

I've created a lightbox which appears when a user clicks on a link to edit some options. It works in Firefox and Safari but as usualy doesn't work in IE. I'm using version 9. In the head I've...

Javascript

How to enable next and previous images for lightbox 0.5 JS library?

by: ilya Kraft | last post by:

Ok, I have a portfolio page on my website and i added lightbox to view pictures of it, everything works fine, but when i press "next" or "previous" buttons it doesn't load next image. ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

✓ answered by KeredDrahcir

Similar topics