How To Do a CSS PopUp Without Opening a New Window

     

      Ever wonder how some people can get little CSS PopUp’s without opening an annoying window? I’ll explain how. One of its advantages is that it’s not blocked by blockers and you can place it wherever you like on your page. Apart from the short Javascript file that you don’t even have to look at, it’s quite easy to understand.

Please note that whenever I speak about a blanket, I’m referring to the transparent film that goes over the content to draw attention to the PopUp.

Click Here For The Demo

The CSS

#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;

What this CSS does is position and style the general elements. The blanket, as discussed earlier, is the translucent color block placed over the content to bring out the popUp.popUpDiv is the name of our popUp div element. It’s important to know that both elements have their position attributes set to absolute. This means they are positioned at certain pixel measurements on your website relative to what object they’re in.

The Javascript File

Click Here To Download the CSSPopUp.js file. Now, the first thing you need to do, is download the Javascript file and put it in a folder you can remember. If you’re curious, open it up, I’ll give a brief overview of what each function does. (Keep in mind I am by no means a Javascript coder, it probably looks a little messy to some pros out there).

• toggle(div_id) – This simply toggles the inserted div name from being displayed (display:block) to being hidden (display:none).
• blanket_size(popUpDivVar) – This resizes the blanket to fit the height of the page because there is not height=100% attribute. This also centers the popUp vertically.
• window_pos(popUpDivVar) – This centers the popUp vertically.
• popup(windowname) – This function contains the other three to make life simple in the HTML file.

The HTML

<div id=”blanket” style=”display:none;”></div>
<div id=”popUpDiv” style=”display:none;”>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Me To Close</a>
</div>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Here To Open The Pop Up</a>

The HTML places two your two CSS elements with display being set to none by default. I’ve noticed this is important for some reason.

Using the attribute onclick in our <a> tags, we can call our function: popup(); to do everything we need. It turns the popUp both on and off.