Super Popup, the last popup script you will ever need

Posted on March 26, 2007 in Internet

Every site has popups. Period. We all hate them but they will never completely go away and if you write XHTML Strict the [ target="" ] tag is depreciated, because of this Javascript needs to step in and fill this functional gap.

A while back when working on a site which had 6 different versions of a popup script I thought to myself there has to be a better way. All the popup scripts were almost identical with minor variations on window options. There were also multiple functions which launched the popup function with preset functions as to minimize the amount of inline javascript.

None of the links were SEO/Accessible and I needed to come up with a solution for launching new windows in XHTML Strict. I ended up developing the following script and have used it on every site I have built since.

It's an easy to use solution to achieve simple, clean, accessible, SEO friendly popup links. No longer will you need to maintain four or five popup functions for one website! This once concise function will do it all for you and provide all the flexibility you will need! Simply it's the last popup script you will ever need.

Some high level features;

SEO/Accessible links
Only one popup script needed for all your popup needs
PopupBlocker detection
XHTML Strict new window generation

I tried to make it as flexible as possible, while leaving open the possibility to have many original popup windows.

Initiate the popup:

The markup which I use to initiate the popup is in constant flux, I wanted to separate function from content a little more by using the link rel=”popup” attribute and attaching events to it, but I couldn’t figure out a good way to pass in arguments without creating my own XHTML attribute like [superPopup=”{option:value, option:value}” – and because I didn’t want to make it an XHTML only solution (maybe I will make one of those) I went with the slightly less sexy solution of using the onclick attribute.

The Markup:


<a href="popup_window_url.html" onclick="superPopup({url:this.href, type: 'someGroup'}); return false;">link text</a>

<a href="popup_window_url.html" onclick="superPopup({url:this.href, type: '_blank'}); return false;">link text</a>

<a href="popup_window_url.html" onclick="superPopup({url:this.href, width: '300', height:'400'}); return false;">link text</a>

The great thing about this markup is that search engines and people without Javascript can still navigate to the popup because the link’s HREF value. Now you will notice in one of the links I specify a “type” and in the other I specify the width and height, this is the power of superPopup. You can use it either way, you can specify in the function (below) a type which has default values for all window options, or you can specify the window options inline – or mix and match!

View the Demo and Instructions page

The Javascript


/*
// Super Popup: when using this function on multiple links across a site its best to define a 'type' within your initiate function, if you are defining a popup on a single page you can pass in the options you want as arguments.
*/

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}

function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}

function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}


function superPopup(args){
	// URL is the only required field. we cannot continue without it.
	if (args.url) {	var url = args.url;} else { alert('url is missing'); return; };
	
	if (args.type) { var type = args.type;};
				
	// option = (if it was passed in as an argument)? use that value : [IF NOT] use this default value;
	var directories = (args.directories)? args.directories : directories = "no";
	var location = (args.location)? args.location : location = "no";
	var menubar = (args.menubar)? args.menubar : menubar = "no";
	var resizable = (args.resizable)? args.resizable : resizable = "no";
	var scrollbars = (args.scrollbars)? args.scrollbars : scrollbars = "auto";
	var status = (args.status)? args.status : status = "yes";
	var toolbar = (args.toolbar)? args.toolbar : toolbar = "no";
	var top = (args.top)? args.top : top = "50";
	var left = (args.left)? args.left : left = "50";
	var width = (args.width)? args.width : width = "250";
	var height = (args.height)? args.height : height = "400";
	var winName = (args.winName)? args.winName : winName = "popup";
	
	/* DEFINE POPUP TYPES */
	if(type == "_blank"){	
		//created to imitate the target='_blank' behavior in html
		var randomNumber = Math.floor(Math.random()*1000);
		var winName="blank" + randomNumber; width=f_clientWidth(); height=f_clientWidth(); 
		scrollbars="yes"; menubar="yes"; toolbar="yes"; directories="yes"; 
		location="yes"; top="0"; left="0";
	} 
	
	if(type == "copyright"){
		height = "500"; width = "70"; scrollbars = "yes";
	}

	/* build our complete window options statement */
	windowOptions = "width=" + width + ", height=" + height + ", directories='" + directories + "', location='" + location + "', menubar='" + menubar + "', resizable='" + resizable + "', scrollbars='" + scrollbars + "', toolbar='" + toolbar + "', status='" + status + "', toolbar='" + toolbar + "', top='" + top + "', left='" + left + "'";

	var newWindow = window.open(url,winName,windowOptions);
	
	if (newWindow == null){
		//alert('A popup containing important information was blocked by your browser. Please enable popups for this site in order to view this information.');
	} else { 
		if (window.focus && newWindow) { newWindow.focus() }
	}
}
/* 
// End Super Popup:
*/
*/