How should visitors close your popup? The Popup Builder widget in The Plus Addons for Elementor gives them five ways, and four of them are on already.
This guide shows each one, how to switch it off, and how to close the popup from your own button.
To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Popup Builder widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.
- Widget to enable: Popup Builder, switched on under ThePlus Settings > Widgets.
The ways a popup can close
| Method | Setting | Where | Default |
|---|---|---|---|
| Press Esc | Esc Button Close Content | Content > Extra Options | On |
| Click outside the popup | Outer Click Close Content | Content > Extra Options | On |
| Click a link inside the popup | On Click Link Popup Close | Content > Extra Options | On |
| Click the close icon | Display Close Icon | Style > Open Content | On |
| Click your own element | Unique Class (Close) | Content > Display Options | Off |
Step 1: Check the Extra Options switches
Select the Popup Builder widget and open Content > Extra Options. Esc Button Close Content and Outer Click Close Content are the first two switches.
Leave them on for offers and forms, so visitors are never trapped. Turn them off for a menu or an age check that must be answered.
Step 2: Decide about links
On Click Link Popup Close closes the popup when any link inside it is clicked. Keep it on for menus. Turn it off if the popup has links that should keep it open.
Step 3: Hide or replace the close icon
On the Style tab, Open Content holds the Close Icon settings. Switch off Display Close Icon to remove it, or turn on Custom Close Icon to use your own image.
Close from your own button
To close the popup from a button inside it:
- Select the button, go to Advanced > CSS Classes and add a class such as
close-offer. - Select the Popup Builder, open Content > Display Options, switch on On Any Other Element’s Click and enter
close-offerin Unique Class (Close) — without the dot.
The Unique Class (Close) element toggles the popup: it closes an open popup, and opens a closed one. Place it inside the popup so it can only ever close it.
Limitations
- Pro only. The Popup Builder is not in the free plugin.
- Outside-click needs an outside. A popup that fills the whole screen has no outside to click; give it a close icon or button.
Troubleshooting
The close button does not work
Test on the published page. If you use your own button, check the class in Unique Class (Close) matches the one in Advanced > CSS Classes exactly, without a dot.
The popup closes when I click a link inside it
Turn off On Click Link Popup Close.
Visitors cannot close it at all
Esc, outer click and the close icon are all switched off. Turn at least one back on.
