显示弹出窗口时禁用后台链接

时间:2018-02-07 06:45:05

标签: jquery html popup

网站有一个弹出窗口,您可以通过在弹出窗口外单击关闭它。问题是当弹出窗口打开并且用户希望通过在弹出窗口外单击来关闭它时:如果链接恰好位于弹出窗口的后台,则用户将被重定向到不想要的目的地。 (image for clarity)

jquery关闭文档

上的弹出窗口
$(".popSlide-bg").on("click touchstart", function (e) 
{
    e.stopPropagation(); 
});  

$(document).on("click touchstart", function () 
{   
    if($(".popSlide-bg").is(':visible'))
    {
        $('.popSlide-black-bg').hide();
        $('.popSlide-bg').hide();
    }
}); 

是否有任何方法可以在弹出窗口可见时添加禁用网站链接的行。

谢谢

2 个答案:

答案 0 :(得分:1)

也许您可以尝试添加图层以防止点击背景链接 检查下面的jsfiddle

$('#btn').click(function(){
    $('#overlay, #popup').css('display', 'block');
});

$('#overlay').click(function(){
    $('#overlay, #popup').css('display', 'none');
});

http://jsfiddle.net/Not2Day2Die/u0cppt2z/7/
希望这个帮助

答案 1 :(得分:0)

使用e.preventDefault()保存了我的问题

$(".popSlide-black-bg").on("click touchstart", function (e) 
{   

e.preventDefault();

    if($(".popSlide-bg").is(':visible'))
    {
        $('.popSlide-bg, .popSlide-black-bg').hide();
    } 

});