Question

so i have created !a simple popup using css and jquery. the problem is, when the popup is activated, links underneath the popup can still be clicked. is there any way to prevent this from happening. the click box for some of the links in the popup are small and one can easily click next to it which means the link underneath the popup is clicked.

the site i am working on: taxslayerplayer.com, look at it on an android and you will see what i mean. also, i have experienced this problem on many other websites while browsing on my phone.

any pointers would be appreciated, thanks!

Answer 1

I’m not sure about a strictly-mobile solution, but you could check for the pop-up being visible and, if it’s visible, simply return false in the click-handler for links:

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

Alternatively, you could instead use a variable, for example popupIsShown, set it to false initially (on DOMReady), and then set it to true when the popup is shown, and reset to false when it’s re-hidden, making the if check a little less expensive:

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