Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Can Overlay Panels trigger another panel when closed?

  • Hello,

    I need to create a popup that opens another one when it closes. Is there an event I can use as a Custom Event trigger?

  • Hi,

    There isn’t a built-in for this. It will require custom JavaScript.

    Try follow the steps below:

    1. Add this JS to a hook element, set the location to where the overlay panels will show, set the hook name towp_footer, and replace #gb-overlay-90 with the actual first overlay panel id.

     <script>
    // Put this in a site-wide script (footer, WPCode, child theme js file)
    document.addEventListener('DOMContentLoaded', () => {
        const firstOverlaySelector = '#gb-overlay-90'; // inspect to get exact selector
    
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.target.matches(firstOverlaySelector)) {
                    // Detect when first overlay closes (aria-hidden becomes true or display:none)
                    if (mutation.target.getAttribute('aria-hidden') === 'true' ||
                        getComputedStyle(mutation.target).display === 'none') {
                        
                        // Fire event to open the second panel
                        document.dispatchEvent(new CustomEvent('show-next-panel'));
                    }
                }
            });
        });
    
        const firstOverlay = document.querySelector(firstOverlaySelector);
        if (firstOverlay) {
            observer.observe(firstOverlay, { attributes: true, attributeFilter: ['aria-hidden', 'style'] });
        }
    });</script>

    2. Edit your second overlay panel, and set the trigger type to custom event, set event name to show-next-panel.

    Let me know if this helps!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.