The simplest type and the most lightweight code for LightBox/Modal/Ajax Popup for your websites, wordpress, joomla, etc.
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.
[caption id="" align="aligncenter" width="500"]
A Facebook Modal Box[/caption]
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 */
}
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>
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>
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>
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>
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;
}
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