How to do an Exit Popup with jQuery?

Asked

Viewed 1,674 times

0

I’m starting now to use jquery now, would like to know how I do to appear an image so mouse goes off the screen in a simple way but in order to learn how to do.

jquery

1 answer

3


The idea is to make an element appear when you take your mouse off the screen.

One of the ways would be to make a div with a height of 5px and leave fixed at the top of the page; when the mouse goes through it, display the output pop-up.

But I found it more interesting to use resources like this below, which did not suit my case because it keeps running other times.

$(window).on('mouseout', function() {
   $('#popup').show();
})

There’s also this mode below, but I don’t recommend it because it keeps watching the mouse move and it doesn’t look very performatic.

$(document).mousemove(function(e) {
    if(e.pageY <= 5)
        {
            $('#exitpopup').fadeIn();
        }
})

In the end, what worked was

var $window = $(window),
    $html = $('html');    
    $window.on('mouseleave', function(event) {
        if (!$html.is(event.target))
            return;
            $('#exitPopUp').show();
    });

Don’t forget to put the exit button. Some versions create two Ivs, one background and one content, so you can click on the background and exit the pop-up.

$("#exitButton").click(function(e){
    e.preventDefault;
    $("#exitpopup").hide();
});

There are also examples that wait for a person’s time on the page before displaying the pop-up. To do this, just use 

setTimeout(function(){ [FUNÇÃO] },3000);

And still some examples use cookies, but as we are talking about server-side, I prefer to use Local Storage even if it does not work in old browsers.

// Criando a data e somando 6 dias
var someDate = new Date();
var numberOfDaysToAdd = 6;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd); 

// Guardar
localStorage.setItem("popupTime", someDate);
// Usar
localStorage.getItem("popupTime");

You can see your variables in localstorage in inspecting Chrome elements

Local storage

Finally, the whole script looked like this:

// Fechar pop-up
$(".closePopUp").on("click", function(e){
    e.preventDefault;
    $("#exitPopUp").hide();
});

// mostrar pop-up
var showpopup = function(){
    // Mostrar só depois da pessoa estar na página por 5 segundos
    setTimeout(function(){ 
        // e a pessoa sair da página
        var $window = $(window),
            $html = $('html');
        $window.on('mouseleave', function(event) {
            if (!$html.is(event.target))
                return;
            $('#exitPopUp').show();
        });                
    },5000);        
}


// exibir depois de quantos dias?
var numberOfDaysToAdd = 6;

// que dia é hoje?
var today = new Date().getTime() + (30 * 24 * 60 * 60 * 1000)

var future = new Date().getTime() + (30+numberOfDaysToAdd)*24*60*60*1000;

// verifica se existe alguma data guardada
var showedTime = localStorage.getItem("popupTime");


// se sim
if(showedTime !== null){

    // verifica se já passou tempo suficiente desde a última exibição
    showedTime = parseInt(showedTime);
    if (today > showedTime){
        // Mostrar pop-up
        showpopup();
        // Atualizar data no localstorage
        localStorage.setItem("popupTime", future);          
    }
} else {
    // a pop-up nunca foi mostrada antes, então vamos criar a data 
    localStorage.setItem("popupTime", future);

    // Mostrar pop-up
    showpopup();
}

Sources:

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.