How To Create A Lightbox To Display Text Or Images
Posted On: May 28, 2009
Here is most simple way to code a Lightbox, just under 55 lines of HTML and JavaScript code.
Few comments about the code:
JavaScript
Function displayHideBox(boxNumber) used for opening and closing lightbox, boxNumber parameter is for multiple light boxes on the page. Just change a number in div id id="LightBox1" and then use this number to open and close this box onclick="displayHideBox('1');”
Styles
.grayBox – for the gray background. You can play with opacity to make it lighter or darker
.box_content – for the white box. You can play with positions and padding to fit it to your design.
HTML
In order to place an image into the box, or change the text inside do it after <!-- Box content --> comment.
Samples
http://www.laptopsbuyer.ca/getQuote/ - Help links next to Model, Screen Size and Condition open light boxes
http://www.easysmsreminder.com/ - Terms and Conditions in the registration form (Instead of close X on top of the box, I Agree or Cancel used to close the box and check checkbox if user agrees)
Code (From File: http://superiorwebsys.com/blog/posts/lightBox.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Light Box</title>
<script type="text/javascript" language="javascript">
/* Superior Web Systems */
function displayHideBox(boxNumber)
{
if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
document.getElementById("LightBox"+boxNumber).style.display="block";
document.getElementById("grayBG").style.display="block";
} else {
document.getElementById("LightBox"+boxNumber).style.display="none";
document.getElementById("grayBG").style.display="none";
}
}
</script>
<style>
.grayBox{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.box_content {
position: fixed;
top: 25%;
left: 30%;
right: 30%;
width: 40%;
padding: 16px;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id="grayBG" class="grayBox" style="display:none;"></div>
<div id="LightBox1" class="box_content" style="display:none;">
<table cellpadding="3" cellspacing="0" border="0">
<tr align="left">
<td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">X</div><p><!-- Box content -->Text of the box!!!</p></td>
</tr>
</table>
</div>
<a href="#" onclick="displayHideBox('1'); return false;">Open Box</a>
</body>
</html>
Michael Pankratov
Associated tags:
HTML,
PHP,
CSS,
Java Script,
DHTML,
Code
Comments:
Jims wrote on
June 4, 2009 at 09:30
Thanks for great sample. I am not a pro in HTML, but it took me 10 minutes to setup a lightbox.
debts wrote on
August 26, 2009 at 06:02
Thanks for the mention, It really helping, it seems that you put a great deal of care to your work. This is really informative stuff and I think that most of the problems relating to this issue will be solved.
Mavegooses wrote on
April 3, 2010 at 21:09
Hi Everyone Im New, I have been browsing around this forum for a few hours as a guest. I found it very and it has helped me allot. I hope to stick around for some time and give something back. Thanks Allot.
Evanlinarrorss wrote on
June 29, 2010 at 23:36
very interesting, thanks
Rogs wrote on
August 5, 2010 at 07:26
After reading you site, Your site is very useful for me .I bookmarked your site!
Darksters wrote on
August 10, 2010 at 13:33
Thanks for best news!
Alexs wrote on
December 8, 2010 at 14:28
Good stuff. I like it.
vlads wrote on
March 9, 2011 at 22:20
this works with all browsers Explorer, Chrom, Safary Firefox.
Debis wrote on
February 22, 2012 at 22:58
Your way of explaining the whole thing in this paragraph is really good, every one be able to easily know it, Thanks a lot.
Ronns wrote on
February 28, 2012 at 16:01
I need something where an entire menu can be shown on the lightbox, all the different menu links will call a simple html file to show on the lightbox, can it be possible, then kindly email me
Michael Pankratovs wrote on
February 28, 2012 at 19:18
Hi Ronn,
Yes, it is possible, we will contact you via email shortly.
Andrea Bosigers wrote on
March 2, 2012 at 15:01
Thanks so much for sharing this lightbox. Is there anyway to add a scroll to the lightbox. The scroll that`s there scrolls the background/main website. I need the lightbox to scroll to show all of the content.
Thanks so much,
Andrea
Michael Pankratovs wrote on
March 9, 2012 at 15:04
Hello Andrea,
If you specify height for the light box, but will have more content in the box it will adds scroll automatically, since you have overflow: auto;
Amys wrote on
August 5, 2012 at 19:32
Do you know if it`s possible to add a scroll bar to this box?
Amy s wrote on
August 6, 2012 at 20:30
Hmmm - this is leaving a really big space between the text and the link to the lightbox. I am trying to embed a texbox that opens as a lightbox into a news piece. Any suggestions? I have tried changing the padding and cell padding. Even when all is set to zero I get a big gap between the text and the words linked to a lightbox.
matts wrote on
September 15, 2012 at 13:26
is there a way of making it auto open on page load?
i tried changing `onclick` to `onload` but didn`t worr
Megans wrote on
September 30, 2012 at 23:49
Michael, you are awesome! Thank you so much for sharing :D
Michael Pankratovs wrote on
October 8, 2012 at 17:30
Hi Matt, yes, you can do this. I would not recommend doing in onload, instead just place a following at the end of page
Greg Millss wrote on
November 29, 2012 at 06:30
Great example and really helpful, thank you. Have a little trouble implementing though? Works fine on standalone html but on my page the `lightbox` pops up for a second then disapears, can`t get it to stay open?
Only have Jcarousellite.js and jquery.1.8.0.js as other scripts?
Greg Millss wrote on
November 29, 2012 at 07:24
It`s all working now changed onlcik to onfocus.
Michael Pankratovs wrote on
November 29, 2012 at 22:35
Hello Greg, so problem was not in the other scripts?