Esküvő

Create CSS popup with Lightbox effect

Now I show you how to create a basic lightbox style popup using CSS and JavaScript. First let's write some HTML.

HTML

<a href="#" onclick="lightbox_open();">Open lightbox</a>
<div id="light"></div>
<div id="fade" onClick="lightbox_close();"></div> 

The link with onclick attribute  launches the popup window.

Fade is the background layer for the lightbox what makes the whole window dark.

Light is the container where you can place your HTML code,  text, image anything you want to display.

Javascript

window.document.onkeydown = function (e)
{
	if (!e){
		e = event;
	}
	if (e.keyCode == 27){
		lightbox_close();
	}
}

Checkes if any key pressed. If ESC key pressed it calls the lightbox_close() function.

function lightbox_open(){
	window.scrollTo(0,0);
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';	
}

This script makes light and fade divs visible by setting their display properties to block. Also it scrolls  the browser to top of the page to make sure, the popup will be on middle of the screen.

function lightbox_close(){
	document.getElementById('light').style.display='none';
	document.getElementById('fade').style.display='none';
}

This makes light and fade divs invisible by setting their display properties to none.

CSS

#fade{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
}
#light{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 200px;
	margin-left: -150px;
	margin-top: -100px;					
	padding: 10px;
	border: 2px solid #FFF;
	background: #CCC;
	z-index:1002;
	overflow:visible;
}

To place light div to middle of the screen, make sure you set margin-left to half of width (300/2=150), and margin-top to half of height (200/2=100).

If you can not see the fade, light divs on your website, try to set a higher z-index. Don't forget, that light div needs higher z-index than fade to put it on front.

Demo »


Esküvő


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Tipsy jQuery Tooltip

Tipsy jQuery Tooltip

20/02/2013

Tipsy is a jQuery plugin for creating a Facebook-like tooltip effect based on an anchor tag′s title attribute.


26 comments

Brian H2016-06-15 02:50

This is great. I've seen other do 100s of lines of needless code, this is so customizable and lean. Great Job!

donna2016-02-04 10:20

hello, I\'ve made it into button instead of link, can you tell me how to put or insert form inside the lightbox instead of an image? Thanks in advance!

Vinay2015-05-07 07:36

nice article very helpfull...Thanks

Lee2015-02-20 06:04

How do you get this to work with multiple lightboxes?

dany2014-11-13 13:26

thanks nice work.\r\nif u add cross image on pop up to close pop up window, it would be great for user...

stealth2014-10-09 14:09

its a good pop up image, but only works once cant do it multiple times with different images even if i set other id's still doesn't work! but still thanks for the simple scipt pop up!

Rocío2014-08-11 03:57

Thanks for the post!!.... Has helped me like a million times :) \r\n\r\nBest Wishes!

George2014-06-26 22:25

I need this to occur multiple times on my page, what changes should I make?\r\n\r\nThank You\r\n

tomi2014-06-07 09:12

A simple full screen overly using CSS only...CSS Full screen overlaytomi

Yuuri2014-05-26 03:03

Thanks for this! But How can adjust the fade duration when the image is clicked?(Like, when clicking the image, it should fade in slower)Please help.

Aziz2013-12-31 20:33

How About More than one image ????

sandeep patel2013-12-27 12:33

Can anyone please say me how create signup light box.i mean that when we click on signup button its form should be open in popup light box.And please provide its code by using javascript css and html.If anyone can help me than it will be its great honor to me

sandeep patel2013-12-27 12:32

Can anyone please say me how create signup light box.i mean that when we click on signup button its form should be open in popup light box.And please provide its code by using javascript css and html.If anyone can help me than it will be its great honor to me

Anand Sharma2013-12-27 07:25

Sir I want to show a popup window with Image or Message with faded background as the Page Loads Please guide changes to the code. Thanks

Catie2013-09-10 19:46

We are using this code on pages with multiple instances of pop up. The content of the first item on the page is displayed in every popup box. What adjustments need to be made so each popup carries the correct text? Thanks

K. Chris C.2013-08-12 03:06

Thanks!

Myke2013-07-08 17:43

Its really nice..as i aspected..

Revathi2013-07-01 16:40

Nice and simple. This is what I am searching for........\r\n\r\nThank You.

Revathi2013-07-01 15:24

Nice and simple. This is what I am searching for........Thank You.

adrian2013-06-22 09:16

only problem i have is that the popup is not positioned on the center of my page :) solution?

Vipin2013-06-13 09:22

This is what i am searching for easy simple and useful...thanks

Sandeep2013-04-15 11:28

Thanx man, you solved my problem.

Helio2013-04-15 11:27

Very useful, helped me a lot. Thank you!

mouni2013-04-15 11:23

i have put the lightbox effect for the login page in my homepage.....when the password r username is wrong then a i need a text message that username r pass is wrong in the same lightbox content only i mean after redirecting from the backend of the login code

Sandeep2013-04-04 09:29

Hello there, new to JavaScript. I am try to create 3 pops using your java script. It opens 3 pops, but display only the content of first id. Then i change the id, but same result. Any one here to help me? Thank you.

Juan2012-12-19 22:01

Nice tutorial, just what I wanted for my website.

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the lion *


Find us on Facebook

Tags

Esküvő

Back to Top