The simplest type and the most lightweight code for LightBox/Modal/Ajax Popup for your websites, wordpress, joomla, etc.

by Nishant Arora on 30/04/2012

Pin It

Working on client’s projects, introduce you to different set of problems and then you set out to improvise on how to get through them. Most of the time my client come up with demands to put up a lightbox on their websites to display slick content on their sites. They are called with different names, some call it the Modal Box, some call it the lightbox, the effect is the same, a translucent background with a window in the middle showing content like sign up forms, opt-in forms, video boxes, etc.

A Facebook Modal Box

You can google for numerous ways to implement this using jQuery, Mootools and other frameworks but I was looking for somethng much more lighter than loading the jQuery or Mootools Libs. Now, when I set out to develop a simple solution for my client, I came across Emanuele Feronato’s Blog where she has written some CSS-JS based lightbox code, but it has its own short comings, like cannot control the video player, i.e the video player keeps on running even after the box is closed.

So I basically improvise on her code to make it much more realistic and practical. So staring with the programming part:

Step 1: CSS - We are going to define two div classes one for the translucent overlay and one for the window in the middle containing stuff.

.black_overlay{
	display: none;				/* The Div is Hidden */
	position: fixed;			/* You will know why fixed in demo */
	top: 0px;					/* Cover the screen */
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: black;	/* Translucent Black */
	z-index:9999998;			/* To keep over other elements of the page */
	-moz-opacity: 0.8;			/* hacks to maintain opacity at 80% */
	opacity:.80;
	filter: alpha(opacity=80);
}

.white_content {
	display: none;				/* The div is hidden */
	position: fixed;
	top: 25%;					/* its 1/4th of screen centered */
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 20px;				/* to prevent it overflowing the border */
	border: 10px solid grey;	/* facebook modal box border color */
	background-color: white;
	z-index:9999999;			/* To keep it over the black overlay */
	overflow: auto;				/* auto introduce the scrolls */
}

.black_overlay{

display: none; /* The Div is Hidden */

position: fixed; /* You will know why fixed in demo */

top: 0px; /* Cover the screen */

left: 0px;

right: 0px;

bottom: 0px;

background-color: black; /* Translucent Black */

z-index:9999998; /* To keep over other elements of the page */

-moz-opacity: 0.8; /* hacks to maintain opacity at 80% */

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none; /* The div is hidden */

position: fixed;

top: 25%; /* its 1/4th of screen centered */

left: 25%;

width: 50%;

height: 50%;

padding: 20px; /* to prevent it overflowing the border */

border: 10px solid grey; /* facebook modal box border color */

background-color: white;

z-index:9999999; /* To keep it over the black overlay */

overflow: auto; /* auto introduce the scrolls */

}

Step 2: DIVs – Now we need two divs to be rendered along the page

<!--- Empty Div --->
<div id="black_translucent" class="black_overlay"></div>

<!--- Content Div --->
<div id="white_content" class="white_content">
	Here Goes Your Div content
</div>

Here Goes Your Div content

</div>

Step 3: JavaScript – Writing the functions to control the divs

<script>
	function PopUP(overlay_element_ID, content_element_ID){
		document.getElementById(overlay_element_ID).style.display='block';
		document.getElementById(content_element_ID).style.display='block';
	}
	function PopDOWN(overlay_element_ID, content_element_ID){
		document.getElementById(overlay_element_ID).style.display='none';
		document.getElementById(content_element_ID).style.display='none';
	}
</script>

function PopUP(overlay_element_ID, content_element_ID){

document.getElementById(overlay_element_ID).style.display='block';

document.getElementById(content_element_ID).style.display='block';

}

function PopDOWN(overlay_element_ID, content_element_ID){

document.getElementById(overlay_element_ID).style.display='none';

document.getElementById(content_element_ID).style.display='none';

}

</script>

Step 4: Combining them all into one

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>LIGHTBOX EXAMPLE</title>
		<!---- THE CSS ---->
		<style>
			.black_overlay{
				display: none;				/* The Div is Hidden */
				position: fixed;			/* You will know why fixed in demo */
				top: 0px;					/* Cover the screen */
				left: 0px;
				right: 0px;
				bottom: 0px;
				background-color: black;	/* Translucent Black */
				z-index:9999998;			/* To keep over other elements of the page */
				-moz-opacity: 0.8;			/* hacks to maintain opacity at 80% */
				opacity:.80;
				filter: alpha(opacity=80);
			}

			.white_content {
				display: none;				/* The div is hidden */
				position: fixed;
				top: 25%;					/* its 1/4th of screen centered */
				left: 25%;
				width: 50%;
				height: 50%;
				padding: 20px;				/* to prevent it overflowing the border */
				border: 10px solid grey;	/* facebook modal box border color */
				background-color: white;
				z-index:9999999;			/* To keep it over the black overlay */
				overflow: auto;				/* auto introduce the scrolls */
			}
		</style>
		<!--- The Java Script --->
		<script>
			function PopUP(overlay_element_ID, content_element_ID){
				document.getElementById(overlay_element_ID).style.display='block';
				document.getElementById(content_element_ID).style.display='block';
			}
			function PopDOWN(overlay_element_ID, content_element_ID){
				document.getElementById(overlay_element_ID).style.display='none';
				document.getElementById(content_element_ID).style.display='none';
			}
		</script>

	</head>
	<body>
		<center>
			<!--- Empty Div --->
			<div id="black_translucent" class="black_overlay"></div>

			<!--- Content Div --->
			<div id="white_content" class="white_content">
				Here Goes Your Div content. <a href="#close" onClick="PopDOWN('black_translucent', 'white_content');">Click to Close</a>
			</div>

			<h1><a href="#close" onClick="PopUP('black_translucent', 'white_content');">Click Here To Show the Pop UP</a></h1>
		</center>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>LIGHTBOX EXAMPLE</title>

<style>

.black_overlay{

display: none; /* The Div is Hidden */

position: fixed; /* You will know why fixed in demo */

top: 0px; /* Cover the screen */

left: 0px;

right: 0px;

bottom: 0px;

background-color: black; /* Translucent Black */

z-index:9999998; /* To keep over other elements of the page */

-moz-opacity: 0.8; /* hacks to maintain opacity at 80% */

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none; /* The div is hidden */

position: fixed;

top: 25%; /* its 1/4th of screen centered */

left: 25%;

width: 50%;

height: 50%;

padding: 20px; /* to prevent it overflowing the border */

border: 10px solid grey; /* facebook modal box border color */

background-color: white;

z-index:9999999; /* To keep it over the black overlay */

overflow: auto; /* auto introduce the scrolls */

}

</style>

function PopUP(overlay_element_ID, content_element_ID){

document.getElementById(overlay_element_ID).style.display='block';

document.getElementById(content_element_ID).style.display='block';

}

function PopDOWN(overlay_element_ID, content_element_ID){

document.getElementById(overlay_element_ID).style.display='none';

document.getElementById(content_element_ID).style.display='none';

}

</script>

</head>

<body>

Here Goes Your Div content. <a href="#close" onClick="PopDOWN('black_translucent', 'white_content');">Click to Close</a>

</div>

<h1><a href="#close" onClick="PopUP('black_translucent', 'white_content');">Click Here To Show the Pop UP</a></h1>

</center>

</body>

</html>

Working Example: Click Here

Hack 1: Introduce a a nice layout inside a popup

A nice layout can be as simple as this:

<div style="float: right;">
	<a onClick = "PopDOWN('black_translucent', 'white_content');"><img src="close-icon.gif"></a>
</div>
Content PopUP
<hr width = "100%" />
<div style="text-align:justify; font-size: 10px; font-family: lucida grande,tahoma,verdana,arial,sans-serif;">
	Here Goes Your Content
</div>

</div>

Content PopUP

Here Goes Your Content

</div>

Working Example: Click Here

Hack 2: Controlling Videos

controlling videos can be tough, because you cannot stop the videos by the close button, b ut lets give it a try, by editing the JS:

function PopDOWN(overlay_element_ID, content_element_ID, video_iframe_ID){
	document.getElementById(overlay_element_ID).style.display='none';
	document.getElementById(content_element_ID).style.display='none';
	var iframe = document.getElementById(video_iframe_ID);
	iframe.src = iframe.src;
}

function PopDOWN(overlay_element_ID, content_element_ID, video_iframe_ID){

document.getElementById(overlay_element_ID).style.display='none';

document.getElementById(content_element_ID).style.display='none';

var iframe = document.getElementById(video_iframe_ID);

iframe.src = iframe.src;

}

We are trying to refresh the video iframe to stop it playing, we just need to add iframe id to the video code.

Working Example: Click Here

So that’s it!, you get a completely customizable, extensible, robust and a light weight lightbox, modal box popup. In case you like it, have questions or develop over it, please lemme know!

Thanks for Reading

Incoming search terms:

ajax lightbox exteds div onclick | modal boxes | lightwieght lightbox input form | lightweight modal iframe | lightweight iframe modal | lightbox type popups | lightbox in ajax code | lightbox code for joomla | html code for lightbox video player | ebay lightbox code | create light weight pop up div | black_overlay{ | black_overlay popup | ajax popup lightbox div | modal popup as lightbox in ajax |

Bob4Hope

Hi,

Thanks for posting this!

Is there a way to have the frame around the box change, to fit the shape of different sized images, as they are selected?

Sincerely,
Bob
- http://nishantarora.in/ Nishant Arora
  
  hi,
  
  I did not actually try it myself, but that should not be tough. you can see this link http://stackoverflow.com/questions/8326273/how-can-i-dynamically-change-the-height-of-a-div-to-match-the-size-of-the-div-co to modify div height according to image height. You can simply modify the div dimensions and centering offsets before displaying the block and after inserting the content in the div.
  
  Lemme know if it’s still a mystery to you.
  
  Cheers!