popup when leaving page

0
Hello,  I need to display a popup when a user is leaving the app, by closing the browser, closing the current tab, and also when the user refresh the page.  The popup will ask him if he really want to leave. Does someone know what is the best approach here?   Thanks
asked
1 answers
2

I thought there was a module that covered this, but I never used it and the search functionality in the market place is useless atm. I don't think a (blocking) popup is possible or desirable: it would be too easy to abuse and block users from doing what they want. What I do on some pages is show a warning for 10 seconds once the mouse leaves the page part of the browser. It's not foolproof, but it may prevent users losing their stuff.

I've added a warning on the page with a class 'alert-docleft' that is hidden by default. And an HTMLSnippet set to "JavaScript with jQuery" with some javascript to show and hide this warning when needed. I'm sure it can be done better.

$(document).mouseleave(function(e){
    //Check mouse is above the viewport
    if(e.clientY < 0){
        $('.alert-docleft').show();
        setTimeout( function() {
            $('.alert-docleft').hide();
        }, 10000);
    }
 });
$(document).mouseenter(function(e){
        $('.alert-docleft').hide();    
 });

 

You could also show/hide the warning when the user is hovering the menu in your application, but it may be better to have a page layout with no menu at all when it's a page where users might lose stuff. My code for show/hide on hovering menu:

$('.navbar-nav, .navbar-brand').mouseenter( function(){
    $('.alert-docleft').show();
    setTimeout( function() {
        $('.alert-docleft').hide();
    }, 10000);
});
$('.navbar-nav, .navbar-brand').mouseleave( function(){
    $('.alert-docleft').hide();
});

 

This doesn't work on touch screens or tablets obviously, when there's no hover function. Maybe there are better ideas.

answered