Beating popup blockers « Growing up is optional

Now this is something I’ll probably be hated for pointing out, but isn’t it obvious? Why not build popups with absolutely positioned <div>s or another element.

At work we have to conduct a website user survey and the view (although it is agreed it is bad practice) is to have a popup on the homepage. It will take them to a survey form when clicked, or alternatively, remind them later, or never bug them again.

Now the code is far from perfect; it’s been thrown together as a proof of concept, but this is basically how it works:

The user visits the page
The popup’s block is hidden (display: none;) by the stylesheet
Javascript checks for a cookie
If the cookie is there, the block stays invisible
If there is no cookie, Javascript sets the popup block to display: block;
The “Remind me later’ link sets a 2 hour cookie if clicked
The “Don’t bug me” link sets a 1 year cookie
Doing the survey sets a 1 year cookie

I’ll clean it up as I bed it in, but here’s the code so far:

HTML

<ul id="popsurvey">
<li><a href="survey.html">Complete a survey - help us improve our website</a></li>
<li><a href="#" onclick="javascript:later('popsurvey');">remind me later</a></li>
<li><a href="#" onclick="javascript:nobug('popsurvey');">don't bug me</a></li>
</ul>

CSS

#popsurvey {
	position: absolute;
	left: 50%;
	width: 260px;
	margin-left: -150px;
	top: 35%;
	background: #00556B url(images/window300wide.jpg) no-repeat top; /*looks like windows */
	padding: 20px;
	padding-top: 35px;
	display: none;
}

Javascript

window.onload = function () {
	var survey = getCookie('nobug')
	if(!survey) {
		document.getElementById('popsurvey').style.display = 'block';
	} else {
		document.getElementById('popsurvey').style.display = 'none';
	}
}

function hide(elementID) {
	document.getElementById(elementID).style.display = 'none';
}

function nobug(elementID) {
	// date 1 year in future
	var ex = new Date();
	ex.setTime(ex.getTime() + (365*24*60*60*1000));
	ex = ex.toGMTString()
	//set nobug cookie
	setCookie('nobug', 'TRUE', ex)
	//close popup
	hide(elementID);
}

function later(elementID) {
	// date 2 hours in future
	var ex = new Date();
	ex.setTime(ex.getTime() + (2*60*60*1000));
	ex = ex.toGMTString()
	//set nobug cookie
	setCookie('nobug', 'TRUE', ex)
	//close popup
	hide(elementID);
}

function setCookie(name, value, expires, path, domain, secure) {
	var curCookie = name + "=" + escape(value) +
	((expires) ? "; expires=" + expires : "") +
	((path) ? "; path=" + path : "") +
	((domain) ? "; domain=" + domain : "") +
	((secure) ? "; secure" : "");
	document.cookie = curCookie;
}

function getCookie(name) {
	var dc = document.cookie;
	var prefix = name + "=";
	var begin = dc.indexOf("; " + prefix);
	if (begin == -1) {
		begin = dc.indexOf(prefix);
		if (begin != 0) return null;
	} else
	begin += 2;
	var end = document.cookie.indexOf(";", begin);
	if (end == -1)
	end = dc.length;
	return unescape(dc.substring(begin + prefix.length, end));
}

Limitations/Caveats

This only works if cookies, Javascript and CSS are on.

Javascript turned off: Popup is not visible
Cookies turned off: Popup on every time
Styles turned off
Styles and Javascript turned off: Popup is rendered in document flow

Growing up is optional