En algunas ocasiones, a pesar de la proliferación de las denominadas como ventanas modales, todavía nos podemos encontrar con la necesidad de generar ventanas popup.

Y para ello he creado un Javascript, basado en Prototype pero sencillo de portar a otro framework o a Javascript puro.

El ejemplo toma como base los siguientes requisitos:

• Poder seguir el enlace en ausencia de Javascript.
• Advertir de la apertura en ventana nueva si hay Javascript y no hay definido un target="blank" (en ese caso la advertencia debería ir en el HTML de modo predeterminado), de modo que la descripción de la acción del enlace sea completa.
• No utilizar Javascript intrusivo, evitando la mezcla de contenido y comportamiento: no utilizar atributo onclick, no utilizar código Javascript en el atributo href.

El HTML del enlace sería el siguiente:

<a href="popup.html" rel="popup">[Texto del enlace]</a>

Y el Javascript este:

document.observe("dom:loaded", function () {
	var popup1 = new VentanaPopup();
		popup1.inicia();
});

function VentanaPopup () {
	this.datos = {
		enlace: 'a[rel="popup"]',
		posicionHorizontal: 0,
		posicion_vertical: 0,
		identidad: 'ventana1',
		textoAdvertencia: ' <span>(Abre en ventana nueva)</span>',
		parametros: 'location=0,status=0,scrollbars=1',
		// Parámetros dimensiones window.open
		ancho: 1014,
		alto: 702
	}
	
	this.inicia = function () {
		var that = this;
		$$(that.datos.enlace).each(function (el) {
			if (el.target!='_blank') { Element.insert(el, {bottom:that.datos.textoAdvertencia});}
			el.observe('click',function (ev) {
				Event.stop(ev);
				var url = el.href;
				that.lanza(url)
			});
		});
	}
	
	this.lanza = function (url) {
		var that = this;
		var ventana = window.open(url, ""+that.datos.identidad+"", "width="+that.datos.ancho+",height="+that.datos.alto+","+that.datos.parametros+"");
		ventana.moveTo(that.datos.posicionHorizontal,that.datos.posicionVertical);
	}
}

Descargar ejemplo (ZIP, 30 KB).