Web Development Blog

How To Create A Lightbox To Display Text Or Images

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:

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

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

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

Evanlinarrors wrote on June 29, 2010 at 23:36
very interesting, thanks

Rog wrote on August 5, 2010 at 07:26
After reading you site, Your site is very useful for me .I bookmarked your site!

Darkster wrote on August 10, 2010 at 13:33
Thanks for best news!

Alex wrote on December 8, 2010 at 14:28
Good stuff. I like it.

vlad wrote on March 9, 2011 at 22:20
this works with all browsers Explorer, Chrom, Safary Firefox.

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

Ronn 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 Pankratov wrote on February 28, 2012 at 19:18
Hi Ronn,

Yes, it is possible, we will contact you via email shortly.


Andrea Bosiger 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 Pankratov 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;


Amy wrote on August 5, 2012 at 19:32
Do you know if it`s possible to add a scroll bar to this box?

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

Michael Pankratov wrote on August 10, 2012 at 17:51

Hello Amy, yes it is possible. You can do something like this:


<div style="overflow:auto; overflow-x:hidden; height:360px;"></div> 

See example here: http://laptopsbuyer.ca/getQuote/ (Help with this section next to problems)


Please provide link to your code, so we can take a look at it (regarding padding issue)


 


matt 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

Megan wrote on September 30, 2012 at 23:49
Michael, you are awesome! Thank you so much for sharing :D

Michael Pankratov 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 Mills 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 Mills wrote on November 29, 2012 at 07:24
It`s all working now changed onlcik to onfocus.

Michael Pankratov wrote on November 29, 2012 at 22:35
Hello Greg, so problem was not in the other scripts?

Add Comment:

CAPTCHA