No More Pop Ups on Websites

It’s so common these days to see pop-ups in websites. When you click on the privacy statement, you see a pop-up. When you click to view the disclaimer (if you ever do) you see a pop up. Or, the page switches over entirely.

I can never shut up about how much of a big fan I am in making website processes simpler. Of course, there are factors such as my time (which is usually subject to my clients’ budgets), as well as difficulty and how easy it is to maintain, but I’m the type that tosses in the extras when I am able to make life better for my clients and their clients as well.

My most recent small-update job was for my client Rhonda Sherwood, who got a website off me back in November of 2006. This website is very neatly and cleanly built with text links instead of graphic links without sacrificing the neat looks, and is one of my better design jobs. She needed to add a link at the bottom to show a disclaimer for legal purposes.

Conventional wisdom would do the following :

Add a link that opens a pop-up window which contains the disclaimer. Using a Javascript pop-up in order to eliminate the menubars, status bar, and buttons would be a bonus.

However. I chose to use some fancier techniques that Facebook uses which makes their website so much better than Myspace – use a floating DIV layer that shows up and disappears. This is done like this :

We start with a DIV with id=”disclaimer”. Once that is in place, and filled with the content you wish to show (the actual text), let’s move onto the initial CSS.
The initial CSS needs to hide it. That’s done by display:none;. Do NOT use display:hide in this case – display:hide attribute will still lay out the page as if the element was there, which would result in a big hole. display:none will show it as if it was never there, which is what we want to begin with. Also, to make sure this shows up on top of the other items on the page, put in z-index:12; or maybe even a higher number if you have other elements with z-index attributes on your page.
#disclaimer
{
display:none;
z-index:12;
width:600px;
height:auto !important;
border:2px solid #CCCC99;
background:#eeeeee;
color:#333333;
position:absolute;
left:100px;
bottom:50px;
padding:5px;
text-align:justify;
}
The rest of the CSS should be self-explanatory.
Now let’s write out a simple Javascript code that will toggle this box on and off. There are many ways to write this script, and perhaps you could write it so that it can control any other element on the page. In this case, this 1 DIV was all we needed to toggle so I kept it simple and linear.
<script language=”JavaScript” type=”text/javascript”> function showdisclaimer() {
document.getElementById(‘disclaimer’).style.display=’block’;
}
function hidedisclaimer() {
document.getElementById(‘disclaimer’).style.display=’none’;
}
</script>
Each of the functions will either show or hide the element with the id=”disclaimer”.
Now, the switch needs to be in place. On the link to the disclaimer, put this in the A tag instead of the usual.
<a href=”#bottom” id=”bottom” onclick=”javascript:showdisclaimer();”>View Disclaimer</a>
If you did the usual thing and put href=”#”, this would scroll the page up to the top. By setting the anchor to id=”bottom” and also linking back to it via href, we’ve accomplished our goal of ensuring the page does not scroll back up. Without the href=”” attribute, the link does not behave like a link – it will not turn your cursor to a hand when you put your mouse over it, or behave like a link under the CSS design (such as underline coming up when you hover your mouse). On cliking it, it triggers our Javascript function.
Now, once the disclaimer layer is open, it needs to be able to close itself. At the end of the disclaimer DIV, let’s put this in:
<a href=”#bottom” onclick=”javascript:hidedisclaimer();”>Close</a>
This link will basically close the DIV layer.