An Elementor modal window usually opens on top of the page, with a darkened background—an overlay—appearing around it. When users click this area, the Popup can close without requiring them to find the small “×” button. This is especially convenient on smartphones, where extra actions can make page interaction more difficult.
This article explains how to enable Popup closing when users click outside the window, prevent accidental closing when they click inside it, add Esc key support, and verify the behavior across different screen sizes.
How Closing a Popup via the Overlay Works
When an Elementor Popup opens, Elementor divides the screen into two logical areas: the modal window itself and the overlay surrounding it. A click inside the Popup should activate its elements—for example, submitting a form or pressing a button. A click on the darkened area is interpreted as the user’s intention to leave the modal flow.
This closing method is suitable for information windows, menus, tooltips, contact forms, and other Popups that do not require the user to complete an action. If the window contains unsaved data or an important payment step, use automatic closing via the background with caution.
- Clicking the overlay closes the Popup.
- Clicking inside the Popup should not close it.
- The close button and Esc key can remain as additional ways to exit.
- The darkened background helps users understand that the page beneath the Popup is temporarily not the primary interaction area.
How to Configure Popup Closing in Elementor
To edit the Popup, open the required Popup template in WordPress and go to its settings. In different Elementor versions, the names or locations of individual options may vary slightly, so focus on the modal window’s settings rather than only on the general page settings.
- Open the Popup template in the Elementor editor.
- Go to Popup Settings.
- Open the Advanced tab.
- Find the Prevent Closing on Overlay option.
- Make sure this option is disabled. If it is enabled, clicking the darkened background will not close the Popup.
- Save the changes and update the published template.
Esc Key Support
In the same or nearby settings, check the option related to preventing closing with the Esc key. For a standard Popup, this option should not be blocked without a good reason. The Esc key allows keyboard, laptop, and assistive technology users to quickly exit the modal window.
If the option has a different name in your version of Elementor, look for a setting such as Prevent Closing on Esc or a similar toggle. It is important not only to add an “×” button but also to provide several clear ways to close the window.
- Do not block Esc for standard informational Popups.
- For critical forms, warn users about the possible loss of entered data.
- After changing the settings, test the Popup on the published page, not only in the editor.
Why You Should Not Completely Disable the Overlay
Sometimes a developer tries to remove the darkening effect so that the Popup appears less prominent. However, the overlay serves more than a decorative purpose. It separates the modal window from the main content, emphasizes the active interface state, and helps users understand where they can click.
If the background is completely transparent, users may fail to notice that a modal window is open or may assume that the page elements continue to work normally. It is better to adjust the overlay’s color and opacity so that it does not compete with the Popup while still creating clear visual contrast.
The overlay also makes the closing area easier to understand on narrow screens. On a smartphone, users may not always be able to conveniently tap a small button in the upper corner, while tapping outside the window is a simpler action.
- Maintain visible contrast between the Popup and the background.
- Do not make the overlay so dark that it competes with the modal window’s content.
- Check that styling errors do not cause the overlay to cover the entire screen, including the button or form.
Testing the Behavior After Configuration
After publishing, do not limit testing to the Elementor editor. Open the page in its normal mode, preferably without cached content, and go through the main user flow. If the Popup is launched by a condition or trigger, make sure it actually opens after the page is refreshed or after the required action.
- Open the Popup and click the darkened area outside its boundaries. The window should close.
- Click the text, form field, image, and other internal elements. The Popup should not close accidentally.
- Test the “×” button if it is included in the design.
- Place the cursor inside the Popup or make sure the page is active, then press Esc.
- Check that the Popup can be opened again after closing.
- Test the page on a narrow screen and on a touch device.
- Test the scenario in which a user enters data into a form and then clicks outside the window.
Common Errors and Causes of Incorrect Behavior
If clicking the overlay does not close the Popup, the most common cause is that Prevent Closing on Overlay is enabled. The issue may also be related to editing the wrong template, failing to save the changes, or displaying a cached version of the page.
Sometimes it may appear that the user is clicking the background, when the click is actually landing on the Popup container, which stretches across almost the entire screen. Check the width, height, spacing, and positioning of the outer container. The free area around the inner content should remain the overlay.
Another common mistake is adding custom JavaScript to Elementor’s standard mechanism unnecessarily. This code can duplicate click handlers, conflict with other scripts, or close the window while the user is interacting with a form. First, check the Popup’s built-in settings.
- Clear the plugin, CDN, and browser caches after changing the Popup.
- Check the display conditions and triggers for the required template.
- Do not place a full-screen transparent container over the Popup.
- Do not add custom code if the required behavior can be configured using standard options.
- Check for conflicts with JavaScript optimization tools and third-party plugins.
When It Is Better to Disable Closing by Clicking Outside the Popup
This method is not suitable for every situation. Disable it if an accidental click could cause the loss of important data or interrupt a process. Examples include a multi-step form, an incomplete checkout, a deletion confirmation, or a critical error message.
In these cases, keep an explicit close button, add a clear warning, and consider confirmation before exiting. If the Popup is a required step in a process, do not rely solely on the overlay or Esc—the behavior should match the window’s content and user expectations.
- An informational message can usually be closed by clicking the overlay.
- A simple subscription form can also usually be closed this way.
- A form containing unsaved text requires caution.
- Payment, confirmation, or irreversible actions should not close accidentally.
Frequently asked questions
Why does my Elementor Popup not close when I click the background?
Check whether Prevent Closing on Overlay is disabled in the Popup settings. Also clear the cache, make sure you are editing the correct template, and check that the Popup container does not stretch across the entire screen.
Will the Popup close if I click inside the form?
Not with the standard structure. A click inside the modal window should remain within its boundaries. If the Popup closes while you are using the form, check the container dimensions, overlapping elements, and third-party JavaScript.
Do I need to keep the “×” button if clicking the overlay works?
Yes, it is recommended. The button provides an obvious way to close the window, while the overlay and Esc key complement it. Several clear exit methods improve the Popup’s usability and accessibility.
Can I completely remove the darkened background around the Popup?
Technically, the design can use a transparent or barely visible overlay, but disabling it completely often makes the interface harder to understand. It is better to adjust the color and opacity so that the modal window remains clearly separated from the page.
Conclusion
To make an Elementor Popup close when users click outside the window, open its settings, go to Advanced, and disable Prevent Closing on Overlay. Also keep accessible closing via Esc and the “×” button, and retain a clearly visible overlay.
After publishing, be sure to test clicks on the background, interaction inside the Popup, the Esc key, reopening, and behavior on smartphones. For forms with unsaved data or critical actions, use this feature only after assessing the risk of accidental closing.