How to Close Lightbox as a Parent

Site designers catch the attention of Web surfers by displaying lightboxes on Web pages. If you've seen an image pop up over a Web page that darkens, you've probably seen a lightbox. One way to create a lightbox is to place your lightbox content inside a pop-up window. This window becomes a child of the parent Web page. Using a little JavaScript, you can give users the ability to close a lightbox window by clicking a button located in the parent window.

Instructions

Create Lightbox Document

1. Create a new HTML document, and add the following code to the document's body section:

   <img src="My_Image.jpg" />

   This code creates an image that will appear in your lightbox window.

2. Replace "My_Image.jpg" with the name of an image on your hard drive or the URL of an image on the Web.

3. Save the document, and remember the name under which you saved it.

Display Lightbox Window

1. Close the document, and create a new HTML document. Add the code shown below to the document's body section:

   <input type="button" value="Open Lightbox" onclick="openLightbox('closeButton', 'blackScreen', '200', '200')" />

   <div id="closeButton" class="closeButton">
   <input type="button" value="Close Lightbox" onclick="closeLightbox('closeButton', 'blackScreen')" />
   </div>

   <div id="blackScreen" class="blackSreen">
   </div>

   The first line of code adds a button that calls the "openLightbox" JavaScript function. The "closeButton" div encloses a button that calls the function that closes the lightbox window. The final div creates the black screen effect that covers the parent window when the lightbox opens.

2. Paste the CSS code shown below into the document's head section:

   <style type="text/css">
   .closeButton{z-index:999; position:absolute; top:0; left:0; display:none;}
   .blackSreen {height:100%; width:100%; background-color:Black;
   z-index:998; position:absolute; top:20; left:0; display:none;}
   </style>

   The .closeButton class and the .blackScreen classes set the properties of the two divs. The display:none attribute values make them invisible when the page opens. The z-index values of 999 and 998 ensure that the divs appear over the other controls in the parent window.

3. Add the code shown below to the document's script section:

   var lightboxWindow;
   var lightboxURL = "lightbox.html";

   var width = 250;
   var height = 300;

   var top = 200;
   var left = 100;

   The first statement creates a variable named lightboxWindow. This variable holds the name of the lightbox window that opens. Replace "lightbox.html" with the name of the HTML document you saved in the first section. The width and height values set the windows dimensions in pixels. Change those dimensions if you like to make the lightbox window larger or smaller. The top and left values set the lightbox's position when it appears over the parent window. Change these values if needed. The value of top refers to the lightbox's distance from the top of the screen. The value of left refers to the lightbox's distance from the screen's left edge.

4. Add the following JavaScript function below the code listed in the previous step:

   function openLightbox() {

   var windowProperties = "'" + "width=" + width +
   ",height=" + height +
   ",toolbar=0,status=0, menubar=0,resiable=0,scrollbars=0" +
   ",left=" + left + ",top=" + top +
   "'";

   document.getElementById("closeButton").style.display = "block";
   document.getElementById("blackScreen").style.display = "block";

   lightboxWindow = window.open(lightboxURL, 'lightbox', windowProperties);
   }

   This function creates the lightbox window and opens it. The windowProperties variable holds the properties that define the window. The document.getElementById statements make the parent window turn black and the "Close Lightbox" button appear. Those two statements reference the id values of the "closeButton" and "blackScreen" divs defined in the body section. The final statement opens the lightbox window.

5. Paste the code shown below after the code shown in the last step:

   function closeLightbox(closeButton, blackScreen) {

   document.getElementById(closeButton).style.display = "none";
   document.getElementById(blackScreen).style.display = "none";
   parent.lightboxWindow.close();
   }

   This function runs when a user clicks the "Close Lightbox" button. The function restores the parent window's color to normal and hides the "Close Lightbox" button. It then closes the lightbox window.

6. Save the document, and open it in your browser. Click the "Show Lightbox" button to view the lightbox, and click the "Close Lightbox" button to close it.

Tips & Warnings

• Add anything you like to the HTML document that creates the lightbox. This example uses an image. You could also display a map, form or other item.

• If users disable pop-ups in their browsers or disable JavaScript, pop-up windows will not open.

References

• Head First Web Design - Ethan Watrall, Jeff Siarto
• Quackit: JavaScript Popup Windows

Resources

• W3Schools.com: JavaScript Examples