Creating an Overlay for a Lightbox

JavaScript
1

Hi all.

As someone that is learning their way through a number of technologies I am also trying to become a JQUERY Ninja (according to the book title). I have produced this today

This is the site here - on my testing server

When you click on the Christmas graphic on the home page another <div> opens on the page - all works lovely.

The thing I am struggling with is that I want a <div> to cover the whole page with a 20% transparent black fill to essentially make it look like the rest of the site is faded out and therefore giving more emphasis to the ‘pop up’ section.

Does anyone have any suggestions on how to do this please.

G

2

Thanks for that I have put that code in and made the relevant changes else where but it has all gone a bit odd - I have a relative position on my wrapper if that helps at all.

3

I see you already have an “overlay” div at the bottom of the page.

If you would show this div at the same time as the div with the content, with some simple CSS to set its background colour and position, then you’ll have your lightbox effect :slight_smile:

Spoiler alert: :shifty:


#overlay {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:10;
	background:#000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
#xmasHolder {
	/* need to make sure this is higher than the z-index of #overlay */
	z-index:100; 
}
/* You may also need to set these styles */
html, body{
	width:100%;
	height:100%;
}