If you’ve ever worked with Elementor and tried to manipulate its popups programmatically, you’ve probably noticed that the official documentation provides event handling examples only with jQuery. However, if you prefer a modern and lightweight solution using Vanilla JavaScript, this guide is for you.
With the MutationObserver API, you can monitor changes to the DOM and detect when an Elementor popup modal is injected into the <body>. This allows you to execute custom actions without relying on additional libraries.
Why Use MutationObserver?
The MutationObserver API is a native JavaScript feature that lets you observe DOM changes, such as:
- Adding or removing elements.
- Modifications to attributes of existing elements.
In the case of Elementor popups, it’s perfect for detecting when the popup modal is dynamically added to the DOM.
Code to Detect Elementor Popups Show
Here’s a complete code snippet that you can use in your project:
// Select the <body> element
const body = document.body;
// Create a MutationObserver
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// Check if new nodes were added
if (mutation.type === "childList") {
mutation.addedNodes.forEach((node) => {
// Check if the added node is an Elementor popup modal
if (node.classList && node.classList.contains("elementor-popup-modal")) {
console.log("Elementor popup detected:", node);
// Add your custom logic here
}
});
}
});
});
// Configure the observer to monitor the <body>
observer.observe(body, { childList: true });
// Stop observing when no longer needed (optional)
// observer.disconnect();How It Works
- Monitoring <body>:
- The <body> element is observed because Elementor injects its popups as child nodes of the <body>.
- MutationObserver:
- We use the MutationObserver to watch for changes in the child nodes of <body> by setting { childList: true }.
- Filtering Added Nodes:
- For each added node, we check if it has the class elementor-popup-modal, which identifies Elementor’s popups.
- Custom Actions:
- When the modal is detected, you can execute any logic in the block where the console.log statement is located.
Practical Use Case
Suppose you want to apply a custom animation when an Elementor popup appears. You can modify the code like this:
if (node.classList && node.classList.contains("elementor-popup-modal")) {
console.log("Elementor popup detected:", node);
node.style.opacity = 0; // Start invisible
setTimeout(() => {
node.style.transition = "opacity 0.5s";
node.style.opacity = 1; // Fade-in effect
}, 0);
}Why Choose Vanilla JS?
- No Dependencies:
- Reduces the overall project size by eliminating libraries like jQuery.
- Improved Performance:
- Vanilla JavaScript is generally faster since it doesn’t have the overhead of handling selectors and events.
- Modern Compatibility:
- MutationObserver is supported in all modern browsers, including Edge and Safari.
That’s it!
Using MutationObserver to detect Elementor popups is an elegant and efficient solution, especially for developers who prefer not to rely on jQuery. With this code, you can fully customize how you interact with Elementor popups, whether it’s adding animations, tracking events, or implementing other custom logic.
If you found this tip helpful, share it with other developers and leave your ideas for popup customization in the comments!
