Skip to main content

How to create simple lightbox like div popups to show images or contact form using CSS and Javascript?

Light weight and Simple lightbox with CSS and Javascript
Create a Lightbox Effect with CSS and little bit of JavaScript

Div Popups are usually used on web pages to display enlarged Images or data capturing forms like contact or feedback. Instead of showing the data on a new window popup, we can use DIV element to display the same with out loading on a separate popup.






There are lots of JS libraries to add effects on your web page. Some times you may want to add a simple Lightbox to your page. For doing this instead of adding a 300kb JS library, you can do it with simple JS and CSS code.

Below given is a simple HTML page which displays a lightbox. no complicated codes are there to confuse you. There are few linkes of CSS declarations and few JS codes to trigger the light box and to close it.

Save the below given code as lightbox.html and open it our browser.

<html>
<head>
<title>SIMPLE LIGHTWEIGHT LIGHTBOX WITH CSS AND JS </title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is a test page to illustrate the functioning of simple Lightbox function. To display a lightbox <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">CLICK HERE</a></p>
<div id="light" class="white_content">HERE IS MY SIMPLE LIGHTBOX. PUT SOME CONTENTS ON IT :). <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>




black_overlay class is the layer that will make the web page seem to fade.

white content
class is the layer which will have the lightbox contents

You have to add an Onclick event to a button or link to trigger the display of lightbox

onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"

Inorder to close the lightbox you have to add following onclick event to a "Close" button or "Close" link

onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"

Hope this helps:)

Try this and post your comments.

Popular posts from this blog

Payback Points - How to redeem - How to merge multiple payback accounts - Block Payback card - Payback customer care

How to apply for a new ration card and what are the documents required?

List of documents required for new ration card application in Kerala and how to apply


Application for a new ration card should be addressed to Taluk Supply Officer (TSO) / City Rationing Officer (CRO) of applicant's residing area.

Primary document required are Residence certificate, Income certificate and incase the applicant's name is in another ration card then he/she should submit the reduction certificate ontained from previous TSO / CRO as proof for removing his/her name from old Ration card.

You can get the new application from your currently residing Taluk Supply Office.

Joomla and Forum Integration - Integrating Forums to Joomla

Joomla is one of the most popular CMS opensource packages. It is very easier to develop website's using Joomla. You just need to download Joomla package from Joomla's Official website www.joomla.org  and install it on your domain and later adding customizations to templates and feature and Your website is ready :). Now a days most websites provides a forum section for it users for discussing various article topics, gathering opinions etc.



Following are some best know forum opensource packages which can be integrated with Joomla and create a new forum experience for users


Urgent Openings for PHP trainees, Andriod / IOS developers and PHP developers in Kochi Trivandrum Calicut and Bangalore. Please Send Your updated resumes to recruit.vo@gmail.com   Read more »
Member
Search This Blog