How to create a Popup with CSS and Javascript
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=”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.
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).
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!
One last thing.. the original code for this was found here. I made some edits to make it work for my application.
January 23rd, 2010 at 9:24 pm
Cool! Keep up the good work and thank you for sharing.
February 22nd, 2010 at 7:06 pm
Fantastic post! This could aid lots of people find out about this matter. Do you want to incorporate video clips together with these? It could undoubtedly help out. Your reason was spot on and owing to you; I probably won’t have to describe everything to my pals. I can simply direct them here