显示弹出窗口时禁用背景链接答案

【问题标题】：Disable background links when popup is displayed显示弹出窗口时禁用背景链接
【发布时间】：2018-02-07 16:48:21
【问题描述】：

网站有一个弹出窗口，您可以通过在弹出窗口外部单击来关闭它。问题是当弹出窗口打开并且用户想要通过单击弹出窗口外部来关闭它时：如果链接恰好位于弹出窗口的背景中，则用户将被重定向到不需要的目的地。 (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();
    }
});

有什么方法可以在弹出窗口可见时添加禁用网站链接的行。

谢谢

【问题讨论】：

将inline-block 或block css 添加到弹出类

标签： jquery html popup

【解决方案1】：

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

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

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

http://jsfiddle.net/Not2Day2Die/u0cppt2z/7/
希望对您有所帮助

【讨论】：

【解决方案2】：

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

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

e.preventDefault();

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

});

【讨论】：