Trackbacks
- No Trackbacks
- create light-box with jQuery & CSS | blogfreakz.com
An easy way to create light-box with jQuery & CSS
Simple light-box effect with jQuery and CSS
As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.
So I created the light-box effect with a few lines of code using CSS and jQuery.
Let’s start coding 
xHTML Code
Place this code within <body></body> tags where ever you like.
<a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center"> <a id="close-panel" href="#">Close this window</a> </p> </div><!-- /lightbox-panel --> <div id="lightbox"> </div><!-- /lightbox -->
First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.
#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.
CSS Code
You can add this code within the document’s <head></head> tag or in any linked style sheet.
* /Lightbox background */
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.
Let’s put some life to our code with jQuery.
jQuery Code
You can add this code within the document’s <head></head> tag and we are done.
<script type="text/javascript" src="PATH_TO/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
})
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
})
</script>
Pretty simple, huh!!
Could it get easier than this?
Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.
I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.
Enjoy this post?
Spread the buzz »
25 Responses to “An easy way to create light-box with jQuery & CSS”
06 Mar, 2010
You can update the CSS of lightbox DIV and set its position to fixed. Also you might need to remove the “#” from href property or set return false on click function.
08 Feb, 2010
please i wanna ask about PATH_TO/jquery.min.js javascript file . how can i downloaded to test the lightwidow in my system
08 Feb, 2010
You can download jQuery from http://jquery.com and save it in the directory where other files website or demo files are located. Check out this link for more information about adding JavaScript to a page.
11 Jan, 2010
Hey,
Great little script. What happens with the “lightbox” div if the page height is greater than the clientHeight.
It would mean you could effectively scroll down and pass the faded lightbox div.
Does anyone know a fix for this? I have tried to change the containers height to match the clientHeight when the lightbox is activated but this doesn’t work great in IE browers 
03 Feb, 2010
I changed the “lightbox” div css position from “absolute” to “fixed” and the height problem went away in Firefox, haven’t tested in other browsers yet.
19 Dec, 2009
Hey buddy ! It looks cool ! and very handy too … keep it up …
15 Dec, 2009
Great work!!! thank you!!
I have creat a php form to sign up to a newsletter, but I dont kno how I can make test validation on required fields??
thanks
Sorry for my bad english
15 Dec, 2009
I’ll be writing a post on form validation very soon, stay tuned..
07 Dec, 2009
Perfect! I like the effect where it darkens everything in the background.
By the way would you mind implementing this as a WordPress plug-in? It’d be a lot easier for those who doesn’t wanna touch a single coding.
Thanks.
29 Nov, 2009
How can I close the box when I click on the empty space of the webpage?
16 Nov, 2009
Hi it doesn’t seem to work for me. When I clicked the link, nothing happens. I have added all the codes exactly you have given, but no changes.
17 Nov, 2009
Please share the link so I can check the code and help you debug the code.
12 Nov, 2009
great work!!!, bt i can with problem, when i run this on Internet Explore 6 it is not working, can u fix this, thanks…..
07 Nov, 2009
Hi there,
Wonder if you can put up a script to display another page (like iframe) but via ajax?
Thanks.
07 Nov, 2009
Yes, You can load content from another pages. This tutorial might help.
31 Oct, 2009
That is awesome, you barley written any code with any of the languages. This is easily the smallest coding script to get a lightbox.
25 Oct, 2009
Very nice tut man i just used it
25 Oct, 2009
Hello. you can open the window when the page loads rather than clicking?
Sorry for my bad english!!
24 Oct, 2009
Oh thats great, thanks for the tutorial
24 Oct, 2009
Pretty easy and cool, but can we include any pages that embed flash in the content of the light box panel?!
24 Oct, 2009
Sure, You can add flash, iframe or any other valid xHTML code or script in this DIV. For example on this website, Live Chat Panel (DIV) contains Javascript which calls the Digsby flash widget.
26 Oct, 2009
Can we add more than one light box in our page. Like one displaying the chat and other to display contact us if we are offline.
26 Oct, 2009
Yes you can add more than one with this technique, you need to modify/add new DIVs and jQuery for the same.
Leave a Reply
04 Mar, 2010
Brilliant! Just what I was looking for
Now, how do you get the lightbox to appear in the middle of the page? I have a link off the bottom of a page and when clicked it takes you back to the top before showing the lightbox, i need the page to stay still! Mike.