Show Elementor Popup Only Once Per Tab Using jQuery

Elementor is a powerful page builder for WordPress, but sometimes you want to control how often a popup appears for a visitor. In this tutorial, we’ll show how to display a specific Elementor popup only once per browser tab session, even if the page is reloaded or refreshed.

Use Case

You have a popup with the ID #elementor-popup-modal-1423 and want it to appear only once when the site opens in a new browser tab. If the page is refreshed, the popup should remain hidden. This is useful for welcome popups, announcements, or promotional banners.

Solution Using jQuery and sessionStorage

We'll use:

• jQuery – for DOM handling
• sessionStorage – to remember if the popup has already been shown in the tab
• MutationObserver – to wait for the popup to load dynamically

The Code

Place the following code in your footer or within an HTML widget using Elementor's custom code section:

<script>
(function($){
    $(document).ready(function(){

        // Check if already shown in this tab
        const popupShown = sessionStorage.getItem("popup_1423_shown");

        // Create MutationObserver to wait for the popup to be added to the DOM
        const observer = new MutationObserver(function(mutations, obs) {
            const $popup = $('#elementor-popup-modal-1423');
            if ($popup.length) {
                if (!popupShown) {
                    // Show the popup only once
                    $popup.show();
                    // Mark it as shown for this tab
                    sessionStorage.setItem("popup_1423_shown", "yes");
                } else {
                    // Hide it forever on reloads
                    $popup.hide();
                }

                // Stop observing once found
                obs.disconnect();
            }
        });

        // Start observing changes in the body
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

    });
})(jQuery);
</script>

How It Works

When a user opens the website in a new tab:

1. The code checks if the popup has been shown already using sessionStorage.
2. If not, it displays the popup and marks it as "shown".
3. If the page is refreshed or reopened in the same tab, the popup will not appear again.

Conclusion

This small script can greatly enhance the user experience by preventing popup fatigue. It’s perfect for promotions or messages that should only be seen once per session. Try adapting it to other popup IDs or adding conditions for more complex logic!

Need help modifying this code? Let me know your popup ID or any advanced condition, and I’ll be happy to assist!