How to Create an HTML Lightbox

Written by robert godard
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an HTML Lightbox
Lightboxes can be useful when creating your online portfolio. (Dynamic Graphics Group/Dynamic Graphics Group/Getty Images)

Lightbox is a Web design tool that creates a small box that displays content such as images or text in it that pops up in the centre of the screen when a link is clicked. There are many variations of creating a lightbox, and most of them require that some JavaScript be used. There is, however, a way to create a lightbox effect on your website using only HTML code.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Open a text editor such as Notepad or TextEdit. Enter in the CSS code in the header part of your page. First type "<style type="text/css">" into your HTML page. Follow this with the code:

    .black_overlay{

    display: none;

    position: absolute;

    top: 0%;

    left: 0%;

    width: 100%;

    height: 100%;

    background-colour: 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-colour: white;

    z-index:1002;

    overflow: auto;

    }

    End your header with "</style>"

  2. 2

    Type "<div id="light" class="white_content">Testing...Texting</div><div id="fade" class="black_overlay"></div>" in the body section of your website. This will define the content you want to appear in your Lightbox. Any html can be inserted here.

  3. 3

    Add a "Close" button your lightbox by typing "<a href = "JavaScript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>" within the content of your Lightbox.

  4. 4

    Create a link to the Lightbox by typing "<a href = "JavaScript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a>" Replace "Click Here" with the text you want for your link.

  5. 5

    Save your file. You have now created a Lightbox with just HTML.

Tips and warnings

  • Integrate your lightbox into a section of your website. They are especially good for displaying images or videos.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.