What are light boxes and how can you make one?

Ever wondered what are those square floating boxes that appear in front of the contents of a page when it is loaded or when you click a link like a thumbnail of a photo or a small window inside the current window?  It is called a lightbox.

A lightbox is very handy when you want to show the content of a link but you do not want them leaving a page. One reason why you might not want your reader to leave a page is because many find it troublesome to go back to a page when they are taken somewhere else even if it is on a different tab or a new window.

Lightbox is also very useful if a page mostly contains links like in the case of a stock photo page where a user will be looking for many different pictures from the displayed list. Imagine how combersome it would be to be going back from tab to tab or window to window on every sample photo.

What makes a lightbox
Basically, a lightbox is only a div element that is positioned above everything else within a page. It is styled in a way that it would look like a new, smaller window inside the browsing window.

How to make one?
I want to create one and put it in my site, how can I do it? I hear you say. Below I will describe how it is done.

Like what was already said earlier, a lightbox is only a div element with the proper styling applied to it. So go ahead, define a div element and give it an id as you wish or you can simply call it lightbox like this:

<div id="lightbox"></div>

This of course will not show anything in your screen. Next, define some format to it using CSS like boder width, color, width and height of the box like this:

<style type="text/CSS">
#lightbox{
 border: 10px solid yellow;
 width: 400px;
 height: 250px;
}
</style>

#lightbox means these formats will be applied only to the element with an id of lightbox. All the formatting is enclosed with these { }. border: 10px solid yellow; means the border will have a width of 10 pixels, it is solid (not dashed, double or any other type) and it is color yellow. width: 400px; means the width of the window is 400 px and height: 250px; means the window will have a height of 250 px. It would then look like this:

Let us add a close button
If you have been observing the internet some uses a circle with an X in it to indicate the close button or a solid square box with also the X on it and some simply uses the word close. All are on the upper right hand corner. I am in the mood for the circle close button so let us do that.

First create a circle, on how to create one, refer to the guide on creating lines. Fill this circle with the same color as the adjacent element's background (later we will be adding a title bar with orange background so we will fill our close button with orange) but instead of an X, let us place the word close instead. It will look like this:

close

The code is this:
html part:

<div id="circlecontainer" style="width: 40px; height: 40px; position: absolute; top: 15px; left: 412px;"><div id="close_button"><div style="font-size: 9px; position: absolute; top: 14px; left: 11px;">close</div></div>

</div>


CSS Part:

#close_button{
 width: 20px;
 height: 20px;
 background-color: orange;
 border: 10px solid yellow;
 border-radius: 20px;
}

The div with id="circlecontainer" is to group both the circle as well as the word close so it is easier to handle it later in case a javascript is used to on it. The CSS part is mainly for the circle. There are also in-line CSS in the HTML part mostly for aligning the elements together.

Now put them together in a way that the circle is on top of the lightbox window. We will also make the corners of the lightbox rounded and add a title bar with an orange background color. The following lines will be added:

First position the circle to the upper right corner of the box by using position: absolute then top: xxpx and left xxpx placed in the CSS for the close_button. The xx are values that will line-up the close-button best to the box.

Next round the corners of the box by adding corner-radius: 15px. Then to add the title bar, add another div element within the div of the box. Give it a height of 30px and background color of orange. In here we will use again in-line CSS (remember to round the upper corners a bit to match the rounded corners of the box):

<div style="background-color: orange; height: 30px; border-radius: 5 5 0 0px;"><b>Title Here</b></div>
So it will look like this:

Title Here

close

Our lightbox is completed. My color selection may not be the best to use for a lightbox. Do some research by looking at what others are using the change it to that color that makes you happy. Also ad content to the box by placing them between the closing div (</div>) of the title bar and the closing div of the main box.

The last thing we need to do is to make the close button function as it should (close the window). To do this we will use javascript to hide the entire box using the display: none property. By using display : none, it is not actually being closed but only being hidden from view. First group it all by containing it in a single div element then refer to its id when in javascript to hide it. Below is the final code:

<script type="text/javascript">
function closeIt(){
document.getElementById("main_container").style.display = "none";
}
</script>

<style type="text/CSS">
#lightbox{
 position: absolute;
 top: 40px;
 border: 10px solid yellow;
 width: 400px;
 height: 250px;
 border-radius: 15px;
}

#close_button{
 width: 20px;
 height: 20px;
 background-color: orange;
 border: 10px solid yellow;
 border-radius: 20px;
}
</style>

<div id="main_container" style="display: block;">
<div id="lightbox">
 <div id="title_bar" style="background-color: orange; height: 30px; border-radius: 5 5 0 0px;"><b>Title Here</b></div>
</div>
<div id="circlecontainer" style="width: 40px; height: 40px; position: absolute; top: 15px; left: 412px;">
<div id="close_button"><div style="font-size: 9px; position: absolute; top: 14px; left: 11px; cursor: pointer;" onclick="closeIt()">close</div></div>
</div>
</div>

There you have it. Make your adjustment as necessary.

Back to CyberLiving home page

Other Posts