Swipe Down to Close in Oxygen Builder Modals using jQuery

Learn how to implement a mobile-friendly swipe-down gesture to close modals in Oxygen Builder with a simple jQuery script. This quick implementation improves user experience on touch devices without requiring complex coding.

Enhance Mobile UX: Implement Swipe-Down Gestures for Oxygen Builder Modals

In today's mobile-first world, intuitive touch interactions have become essential for creating seamless user experiences. If you're building WordPress sites with Oxygen Builder, adding touch gestures can significantly enhance how users interact with your modals on mobile devices.

This tutorial shows you how to implement a simple yet effective swipe-down gesture to close modals in Oxygen Builder using jQuery.

The Solution: A Simple jQuery Script

Adding swipe functionality requires just a few lines of jQuery code that you can easily implement on any Oxygen Builder site:

javascript
jQuery(document).ready(function($) {
    let start_y, touchStartTime, touchEndTime;
    const swipeThreshold = 85; // Minimum distance required for swipe detection
    const holdDuration = 500; // Minimum hold time in milliseconds

    $('.ct-modal').on({
        'touchstart': function(e) {
            start_y = e.originalEvent.touches[0].pageY;
            touchStartTime = new Date().getTime();
        },
        'touchend': function(e) {
            const end_y = e.originalEvent.changedTouches[0].pageY;
            touchEndTime = new Date().getTime();
            if (end_y - start_y > swipeThreshold && (touchEndTime - touchStartTime) > holdDuration) {
                $('.oxy-close-modal').trigger('click');
            }
        }
    });
});

How It Works

Key Variables

• start_y: Captures the Y-coordinate where the touch begins
• touchStartTime and touchEndTime: Track when the touch interaction starts and ends

Important Constants

• swipeThreshold: Defines how far users need to swipe down (85px) to trigger the close action
• holdDuration: Sets the minimum time (500ms) users need to hold before the swipe is recognized as intentional

Event Handling

The script binds two touch events to all Oxygen modals (using the .ct-modal class):

1. touchstart: Records the initial touch position and timestamp
2. touchend: Calculates:
   • The distance swiped (end_y - start_y)
   • The duration of the touch (touchEndTime - touchStartTime)

If both the distance and duration thresholds are met, the script triggers a click on the modal's close button.

Implementation in Three Simple Steps

1. Create or select your modal in Oxygen Builder
2. Add a Code Block element to your page or insert the script in your site's custom JavaScript section
3. Paste the jQuery code shown above

That's it! The script automatically targets Oxygen's default modal classes (.ct-modal), so no additional configuration is needed.

Customization Options

• Adjust the swipeThreshold to make the gesture more or less sensitive
• Modify the holdDuration to change how long users need to hold before the swipe registers
• Add visual feedback by incorporating CSS transitions during the swipe

Why This Matters

Mobile users expect intuitive touch interactions that mirror physical movements. By adding this swipe-down gesture, you're providing a natural way to dismiss content that feels familiar and comfortable to users accustomed to touch interfaces.

This small enhancement can significantly improve your site's mobile user experience without requiring complex development work.

Conclusion

Implementing touch gestures like swipe-to-close demonstrates attention to detail and consideration for mobile users. This jQuery solution for Oxygen Builder provides a quick win for improving mobile UX with minimal effort.

Try implementing this on your next Oxygen Builder project and watch how it transforms the mobile experience of your modals!