Cómo hacer un PopUp qué no lo bloquee el navegador

Cómo ya sabéis desde hace tiempo los navegadores se han puesto “duros” para controlar que se muestren los molestos PopUp, no obstante en este post te mostraré como realizar PopUps sin que los bloquée el navegador.

PopUp con jQuery

Utilizando las librerías jQuery podemos lanzan ventanas de diálogos como si fuesen PopUps, a mi modo de ver esta es la solución más elegante para realizar ventanas de diálogo o ventanas emergentes desde tu web.
La mayor contra es que no son realmente PopUps y tienen muchas limitaciones ya que no son PopUps reales. No obstanten, en general puedes utilizar este tipo de ventanas para casi cualquier cosa de caracter general, si trabajas con sistemas de publicidad/afiliados es posible que estos PopUp no te valgan para realizar impresiones o visitas a páginas externas, ya que no son PopUps “reales”.

Si los quieres probar aquí tienes una Demo:
PopUp con jQuery

Código para generar un PopUp con JavaScript

JavaScript nos permite lanzar Popups con el comando window.open , el problema de esto es que muchas veces casi siempre estas ventanas emergentes las bloquea el navegador.
Y lo peor de todo es que a veces casi siempre el usuario ni se da cuenta de que el navegador le ha bloqueado la ventana emergente. Desmejorando la comunicación entre la página web y el usuario.

Este código nos valdría para controlar si el navegador a bloqueado la apertura de la ventana, y en caso de que así sea poder enviar un mensaje al usuario para informarle del problema.

var windowName = 'userConsole'; 
var popUp = window.open('/popup-page.php', windowName, 'width=1000, height=700, left=24, top=24, scrollbars, resizable');
if (popUp == null || typeof(popUp)=='undefined') { 	
	alert('Please disable your pop-up blocker and click the "Open" link again.'); 
} 
else { 	
	popUp.focus();
}

PopUp unblocked con JavaScript

Cómo ya os he comentado antes “en los navegadores actuales para poder abrir una ventana nueva es necesario la acción del usuario, por ejemplo realizando un click sobre un enlace”.

Basándonos en esto vamos a facilitar la tarea de poder lanzar una ventana después de un click en cualquier lado de la web, sin que este click tenga por que ser en un enlace o hipervínculo.

A continuación os dejo un código para que se abra una ventana cada vez que el usuario haga click en cualquier lado de la web, esta ventana no será bloqueada por el navegador porque viene después de un click del usuario.

Código javaScript:

 
 
function LanzaPopUnder() {    
         var url = "http://tu-dominio.com";
         window.open(url, "s", "width=1, height=1, left=0, top=0, resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no").blur();
         window.focus();         
    }
 
} 
function addFunctionToClick() {
    if (document.body) {
      if (document.all) {
        document.body.attachEvent("onclick", LanzaPopUnder);
      } else {
        document.body.addEventListener("click", LanzaPopUnder, false);
      }
    } else {
      setTimeout("addFunctionToClick()", 100);
    }
} addFunctionToClick();