Nelio Popups makes it easy to define the way a visitor that sees a popup can close it. Let’s review the three ways of closing a popup with Nelio Popups.
Add a Close Button
Nelio Popups allows to add a close button to your popup and configure its styles. Just follow these steps:
- Go to Nelio Popups » All Popups and edit the one you want.
- In the editor sidebar, go to the Settings panel, and open the Style tab.
- Find the toggle ‘Add close button’ and activate it.

By doing this a close button will appear in your popup, and new setting to style that button will appear. You can select the icon for the button amongst a set of predefined icons, and even include a label for the button that will appear next to it.
In addition to it, you can set the position of the button relative to the popup, and even delay the appearance of the close button. This is specially useful to force users to interact with the popup before the close button appears.
Finally, you can set the foreground and background colors for the close button.
Here is an example of close button with the same settings as in the previous screenshot:

Advanced Closing Settings
Another way of closing a popup is by pressing the ESC key or by clicking somewhere outside the popup container. To access these settings, just follow these steps:
- Go to Nelio Popups » All Popups and edit the one you want.
- In the editor sidebar, go to the Settings panel, and open the Advanced tab.
- Find the toggles ‘Close on ESC’ and ‘Close on outside click’.

Just activate the toggles that you want and then you can close your popup by pressing the ESC key or clicking outside the popup.
Link to Close
Another way of closing a popup is by including a link to #close-nelio-popup
in your popup content. To do it, just follow these steps:
- Go to Nelio Popups » All Popups and edit the one you want.
- In the editor, add a paragraph block or edit an existing one.
- Select the text of the link and click the Link button in the block toolbar.

The link must point to #close-nelio-popup
. Then, when you see the popup and click the link, the popup will close.

Additional Close Control
The last way of closing a popup is a bit different. In the popup editor, some blocks used in the popup may have an additional setting in the right sidebar inside a Popup Controls panel. One example is the core/button
block.

Inside the Popup Controls panel there is a ‘Close popup’ toggle. If active, when the visitor clicks on that button the popup will close.
By default, only the core/button
block has this special panel with the closing setting. But you can change this behavior and extend it. Just hook into the nelio_popups_blocks_with_close_control
filter in PHP as follows:
add_filter( 'nelio_popups_blocks_with_close_control', function( $blocks ) {
// by default $blocks = array( 'core/button' );
// add your additional block names here
return $blocks;
} )
Include the additional blocks you want and then they will have the ‘Popup Controls’ panel with the ‘Close popup’ toggle. Clicks on these blocks with the ‘Close popup’ toggle active will close the popup.