android - 防止 css/jquery 弹出窗口允许点击下面的链接（仅限移动设备）

Question

所以我创建了一个使用 css 和 jquery 的简单弹出窗口。问题是，当弹出窗口被激活时，仍然可以点击弹出窗口下方的链接。有什么办法可以防止这种情况发生。弹出窗口中某些链接的点击框很小，可以轻松点击旁边的链接，这意味着点击弹出窗口下方的链接。

我正在开发的网站：taxslayerplayer.com，在安卓上查看它，你就会明白我的意思。另外，我在手机上浏览时在许多其他网站上都遇到过这个问题。

任何指针将不胜感激，谢谢！

Answer 1

我不确定是否有严格的移动解决方案，但您可以检查弹出窗口是否可见，如果可见，只需return false在链接的点击处理程序中：

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if ($(popupSelector).is(':visible')) {
        return false;
    }
    else {
        // do whatever you'd normally do with the links
    }
});

或者，您可以改为使用变量，例如popupIsShown，将其设置为false最初（在 DOMReady 上），然后将其设置true为显示弹出窗口的时间，并重置为false重新隐藏的时间，从而降低if检查成本：

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if (popupIsShown) {
        return false;
    }
    else {
        // do whatever you'd normally do with the links
    }
});

Answer 2

如果出现弹出窗口，请使用布尔值并将其设置为 false。有用！

PS：刚刚检查过..大卫已经回答了。