example - jquery popup overlay

Mostrar jQuery popup una vez por visitante

Question

¿Cómo hago para que este script solo se ejecute si la persona es un nuevo visitante del sitio? Se ejecuta cada vez que se solicita la página que se vuelve muy molesto.

//0 means disabled; 1 means enabled;
var popupStatus = 0;

function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}


$(document).ready(function(){

    //LOADING POPUP
    //Click the button event!
        //centering with css
        centerPopup();
        //load popup
        loadPopup();

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });

});

Answer 1

establecer un conjunto de cookies para que expire al final de la sesión con un valor de 1 o verdadero o lo que sea. Luego busca galletas. Si existe, no lo muestres.

Answer 2

Use cookies si desea un método puramente del lado del cliente. Establezca una bandera que indique que el usuario ya ha visto su introducción o lo que sea.

En el caso de un sitio con algún tipo de autenticación, esto podría ser manejado por el servidor.

¡Dios te bendiga!

Answer 3

Como ya se dijo, necesita crear una cookie la primera vez que un usuario ve la página y luego verificar que la cookie exista en otras visitas.

El JavaScript para crear cookies no es tan fácil como podría ser porque necesita establecer una cadena con un formato preciso. Es más fácil usar estas funciones auxiliares que se pueden encontrar en Quirksmode :

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split('';'');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)=='' '') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Luego, en tu código todo lo que tienes que hacer es:

if(readCookie("popupShown") == null) {
    // Create cookie for 30 days
    createCookie("popupShown", 1, 30);
    yourPopupFunction();
}