-
Anonymous
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 to
wp_footer, and replace#gb-overlay-90with 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.