CODEWITHSUNDEEP
androidjqueryhtmlcssmobile
Roeland
Roeland

Reputation: 3878

prevent css/jquery popups from allowing links underneath to be clicked (mobile only)

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!

Upvotes: 0

Views: 136

Answers (2)

David Thomas
David Thomas

Reputation: 253506

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
    }
});

Upvotes: 4

SandBag_1996
SandBag_1996

Reputation: 1601

Use a boolean value and set it to false in case of pop-ups. It works!

PS : Just checked.. David has already answered it.

Upvotes: 0

Related Questions