disable the function of clicking on links underneath css/jquery popups on mobile devices

Question

disable the function of clicking on links underneath css/jquery popups on mobile devices

After successfully creating a simple popup using CSS and jQuery, I encountered an issue where links underneath the popup can still be clicked. This problem arises since the click box for some of the links in the popup is small, making it easy to accidentally click next to them and activate the link underneath.

I am currently working on a site called taxslayerplayer.com, and if you view it on an Android device, you'll see exactly what I mean. This issue is not exclusive to my site; I have noticed it on many other websites while browsing on my phone as well.

If anyone has any suggestions or pointers on how to prevent this from happening, I would greatly appreciate it. Thank you!

android jquery html css mobile

Answer 1

Answer №1

If you're looking for a solution that works on mobile devices, one approach could be to check if a pop-up is currently visible. If it is, then simply prevent the default behavior of links by returning false in the click-handler:

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if ($(popupSelector).is(':visible')) {
        return false;
    }
    else {
        // handle links as usual
    }
});

Another option is to use a variable like popupIsShown. Initialize it to false on DOMReady, update it to true when the pop-up is displayed, and set it back to false when hidden. This way, the conditional check becomes more efficient:

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if (popupIsShown) {
        return false;
    }
    else {
        // handle links as usual
    }
});

Answer 2

If you're looking for a solution that works on mobile devices, one approach could be to check if a pop-up is currently visible. If it is, then simply prevent the default behavior of links by returning false in the click-handler:

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if ($(popupSelector).is(':visible')) {
        return false;
    }
    else {
        // handle links as usual
    }
});

Another option is to use a variable like popupIsShown. Initialize it to false on DOMReady, update it to true when the pop-up is displayed, and set it back to false when hidden. This way, the conditional check becomes more efficient:

$('a').filter(
    function(){
        return !$(this).closest(popupSelector).length;
}).on('click', function(e){
    if (popupIsShown) {
        return false;
    }
    else {
        // handle links as usual
    }
});

Answer 3

Answer №2

To avoid pop-ups, ensure to use a boolean value and set it as false. This method has been tested and proven effective.

Update: I have verified the solution provided by David.

Answer 4

To avoid pop-ups, ensure to use a boolean value and set it as false. This method has been tested and proven effective.

Update: I have verified the solution provided by David.

disable the function of clicking on links underneath css/jquery popups on mobile devices

Answer №1

Answer №2

Similar questions

Trouble with transferring JSON data using jQuery AJAX

Tips for creating slanted div borders

How to Toggle Div Visibility with AngularJS ng-show and ng-click

Trouble with Bootstrap Popover's visibility

"Troubleshooting AmCharts: How to Resolve Missing Data on Graphs/Implementing AJAX for AmCharts Data Visualization/Querying a Database to Dynamically

Google Fonts are displaying in a bold style even when the bold property is not set

Guide on embedding a hierarchy triangle in an email with HTML

Dynamically fetch data using Ajax with Qtip

Troubleshooting Problem with $.ajax Call in jQuery Full Calendar (Using Static Events Upon Page Load)

Retrieve the data from the second event in the ajax response and return its value

What is the best way to apply opacity to a div without affecting the background image?

Sending form data without interrupting the user interface by using asynchronous submission

Incorporating HTML snippets into files using PHP

What methods can be used to identify statistics on active applications, such as the foreground app, on the most recent version of

Methods to prevent ExtentReports from transforming HTML references in your Selenium logs into real HTML code

What is the best way to display HTML and JavaScript content using Express?

Attempting to fill a collection of JSON entities through a GET call?

Change the value of an input button in an HTML tag without assigning any value to it

Are you utilizing ListViews in your Android application?

Styling the scroll bar within a fixed parent container's inner div with CSS