How to make an Exit Popup with jQuery?

The idea is to make an element appear when you remove the mouse from the screen.

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

But I found it more interesting to use features like this below, which did not work for my case because it continues to run at other times.

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

It also has this mode below, but I do not recommend it because it keeps watching the mouse move and does not seem very performative.

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

Do not forget to put the exit button. Some versions create two divs, one background and one content, so you can click on the background and exit the popup.

$("#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 popup. To do this, just use

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

And 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 the localstorage when inspecting chrome elements

Finally,thewholescriptlookslikethis:

//Fecharpop-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:

• link
• link
• link