Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

C贸mo hacer un PopUp qu茅 no lo bloquee el navegador

11 julio, 2016
popup

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.

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.

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

popup

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();