How to Create an HTML Lightbox
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 center 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.
Other People Are Reading
Instructions
-
-
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-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;
}
End your header with "</style>"
-
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
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
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
Save your file. You have now created a Lightbox with just HTML.
-
1
Tips & Warnings
Integrate your lightbox into a section of your website. They are especially good for displaying images or videos.
References
- Photo Credit Dynamic Graphics Group/Dynamic Graphics Group/Getty Images
