Show modal if page refreshed, but not if a link is followed

Question

A visitor wants to leave the page (reload, refresh, close tab..etc.), and then a function is triggered prompting a modal "are you sure you want to leave?".

I want to allow them to leave the page without the modal prompt if they click on a link.

Here is a jsfiddle example- http://jsfiddle.net/vvj90z8h/3/

<a href="http://www.google.com" class="button">Proceed</a>      
<div class="price">$139.99</div>

// function
priceFunction = function (){
    window.onbeforeunload = function() {
        return 'Sure you want to leave?';
    }
};

// if price is 139.99, run function
var price = $(".price").text().replace(/[^0-9\.]/g, '');
if (price = 139.99){
    priceFunction();
}

If you refresh the page, the modal shows, which is okay.

I'm wanting to click the link and not have the modal show.

Maybe it would be easier to have "not prompting" be the default action and "prompting" be the explicit action? — David, Sep 09 '14 at 16:50
This is an exact duplicate of [this](http://stackoverflow.com/questions/18783535/jquery-beforeunload-when-closing-not-leaving-the-page) question. — LondonRob, Sep 09 '14 at 16:54
@EhsanSajjad the basis for it not to show was if that link was clicked — Bjorn.B, Sep 09 '14 at 17:18
@David I had tried that route but the first condition was if the url contained "shoppingcart". I think that threw me off so I missed your suggested route in the first place. Thanks for the suggestion though, I might just try that anyway :) — Bjorn.B, Sep 09 '14 at 17:21

score 1 · Accepted Answer · answered Sep 09 '14 at 16:51

1

You can unbind the onbeforeunload event listener on click :

$('#proceed').click(function(){ window.onbeforeunload = null; });

Demonstration

answered Sep 09 '14 at 16:51

Denys Séguret

372,613
87
782
758

score 0 · Answer 2 · answered Sep 09 '14 at 16:51

Set a flag when they click or unbind the event

(function(){
    var pass = false;
    $(document.body).on("mousedown","a.button", function () {
        pass = true;
    });

    window.onbeforeunload = function() {
        if(pass) return;
        return 'Sure you want to leave?';
    }

}());

or

(function(){

    $(document.body).on("mousedown","a.button", function () {
        $(window).off("beforeunload");    
    });

    $(window).on("beforeunload", function() {
        return 'Sure you want to leave?';
    });

}());

score 0 · Answer 3 · answered Sep 09 '14 at 17:04

http://jsfiddle.net/jcqjj1u3/2/

// function
priceFunction = function (){
    window.onbeforeunload = function() {
            return 'Sure you want to leave?';
    }
};

// if price is 139.99, run function
var price = $(".price").text().replace(/[^0-9\.]/g, '');
if (price = 139.99){
    priceFunction();
}

var beforeUnloadFunction;

$('.button').click(function(){
    beforeUnloadFunction = window.onbeforeunload; // save the function for later just in case
    window.onbeforeunload = null;
    // following code is optional. Use it only if you need to do other stuff befre leaving
    event.preventDefault();
    // do other stuff before leaving if you'd like to
    location.href= $(this).attr('href');
});

Thanks alot svassr! I saw Dystroys answer first but this also worked perfectly — Bjorn.B, Sep 09 '14 at 17:14

Show modal if page refreshed, but not if a link is followed

3 Answers3