A SIMPLE POPUP USING JAVASCRIPT

I still remember, a long time back (almost a year), when I first wanted to implement a popup in my web-designs with translucent background. And as usual the internet and google were the first 2 things that came into my mind. I went searching on and found cool and sleek stuffs like greybox, lightbox, thickbox,....and lot, with neat colors and cool jQuery effects.

But back then it was pretty heavy for me and I wanted something simpler. So I thought why not I make a popup starting simply with JavaScript, without any jQuery effect! So, I rolled up my sleeves and started coding a popup with translucent background using simple HTML, css and JavaScript and wanted to keep it as simple as possible. And here's what I got -

DEMONSTRATION: CLICK HERE (Best viewed in Google chrome, Mozilla Firefox, IE7 and above)

» This is how I did it -

First, I created two <div> tags. One for the translucent black layer with id="overlay" and class="translucent_cover" and the other for the popup with message in it with id="top_block" and class="top_block". Then I put some content within the 2nd div, i.e, the message to be shown in the popup box.

HTML:

<div class="translucent_cover" id="overlay" style="visibility: hidden;">
</div>

<div class="top_block" id="top_block" style="visibility: hidden;">


<div class="text_embross">
<b>SIMPLE POPUP</b>
</div>
<hr/>
<div class="black_text">
<i>This is a demo of a little sophisticated version<br/>
of the simple popup using JavaScript.<br/>
Hope you liked it.</i>
</div>
<div align="right">
<input class="blue_button" onclick="close_pop()" type="button" value="Close" />
</div>

</div>

The next thing I had to do is to add css classes in oder to design those <div>s the way I wanted. The "translucent_cover" covering the whole page with black color and opacity of 80%. The "top_block" over it with content already added.

CSS:

.translucent_cover
{


position: absolute;
display: block;
height: 1500px;
width: 2000px;
top: 0;
left: 0;
z-index: 1000;
background: black;
-moz-opacity: 0.8;
opacity:.80;
margin-top: -300px; //adjust as per need
margin-left: -100px; //adjust as per need
filter: alpha(opacity=80);

}

.top_block
{

position: absolute;
display: block;
min-height: 100px; //adjust as per need
min-width: 350px; //adjust as per need
z-index: 1001;
background: white;
margin-left: -150px; // adjust as per need
left: 50%;
top: 65%;
border: 6px solid white;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
padding: 15px;

}

Next came the biggest thing. The designs being done, the only thing that was left was to adjust the popup's visibility using JavaScript. The first and foremost thing was to create an event either through a link or through a button or through any click that will call the function, which will initiate the pop-up's visibility. I chose to go for a link.

HTML:

<a href="javascript:void(0)" onclick="pop()">CLICK HERE</a>

Finally came the JavaScript functions:

JAVASCRIPT:

function close_pop()
{
document.getElementById("overlay").style.visibility='hidden';
document.getElementById("top_block").style.visibility='hidden';
}

function pop()
{
document.getElementById("overlay").style.visibility='visible';
document.getElementById("top_block").style.visibility='visible';
}

That's it..my simple JavaScript popup was ready and running. May be you might argue this is not the best way to do it, but still, I was pretty satisfied with my first popup. Later on, it went through a lot of optimizations with dynamic content loading ability and smooth jQuery effects, but this has been my first stepping stone! Don't worry, they'll be coming soon in this blog!

Hope you liked it...!!

---

SIMPLE POPUP

---

This is a demo of a little sophisticated version
of the simple popup using JavaScript.
Hope you liked it.