如果页面刷新，则显示模态，但如果后面有链接，则不显示模态

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

本文关键字：模态 如果 显示 链接 刷新      更新时间：2023-09-26

访问者想要离开页面（重新加载、刷新、关闭选项卡等），然后触发一个函数，提示一个模态"你确定要离开吗？"。

如果他们点击链接，我想允许他们在没有模式提示的情况下离开页面。

下面是一个jsfiddle示例-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();
}

如果刷新页面，则会显示模态，这是可以的。

我想点击链接，而不是模态秀。

点击即可解除onbeforeunload事件监听器的绑定：

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

演示

当他们点击或取消绑定事件时设置标志

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

或

(function(){
    $(document.body).on("mousedown","a.button", function () {
        $(window).off("beforeunload");    
    });
    $(window).on("beforeunload", function() {
        return 'Sure you want to leave?';
    });
}());

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');
});
相关文章：