Popups suck.
The good thing is you don’t see that many of them any more. That’s because browsers recognize that they suck and are most likely spam or ads and so they block the popups. The old way of creating a popup was to force open a new browser window over the current browser window. So this is what browsers block. But what if you actually have a need to use a popup window for something useful and not spammy? This happened to me the other day. A client wanted a popup window on their homepage to wish everyone a Merry Christmas.
Knowing I couldn’t use the old popup method, I went searching. I knew it’d be easy enough to use CSS to put a floating div over the content of the site, which creates a popup effect. The problem was how do you close the popup once it’s open? Javascript would be needed for this. Check out the demo I setup which shows how the CSS popup can be set to open on pageload or by clicking on a link; and then how Javascript allows you to have a “close” button that shuts or hides the popup. Then continue reading for the code and downloadable files.
If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
<a href="#" onclick="popup('popUpDiv')" >Click to Close CSS Pop Up</a>
</div>
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
If you want the popup to load on page load, put the following in your body tag.
<body onload="popup('popUpDiv')">
Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background:url(pop-back.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!
The popup automatically centers itself in the screen. To adjust this for your popup, open the javascript file. You’ll see numbers for the height and width: window_width=window_width/2-200;//200 is half popup’s width
Change “200″ so it’s half the width of yours; do the same for the line that declares the height.
Credits:
Script Source
Pingback: TTRH Updates | kristin kreates