Documentation

All the information you need in one place

How to Set Up Popup Closing Settings in Nelio Popups

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:

  1. Go to Nelio Popups » All Popups and edit the one you want.
  2. In the editor sidebar, go to the Settings panel, and open the Style tab.
  3. Find the toggle ‘Add close button’ and activate it.
Settings to add a close button on a popup.
Settings to add a close button on a popup.

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:

Example of close button in a popup.
Example of close button in a popup.

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:

  1. Go to Nelio Popups » All Popups and edit the one you want.
  2. In the editor sidebar, go to the Settings panel, and open the Advanced tab.
  3. Find the toggles ‘Close on ESC’ and ‘Close on outside click’.
Advanced settings to close a popup.
Advanced settings to close a popup.

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:

  1. Go to Nelio Popups » All Popups and edit the one you want.
  2. In the editor, add a paragraph block or edit an existing one.
  3. Select the text of the link and click the Link button in the block toolbar.
Add a link to close your Nelio Popup.
Add a link to close your Nelio Popup.

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

Popup with a closing link in the text "I don't want this.".
Popup with a closing link in the text “I don’t want this.”.

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.

Popup close control in a button block.
Popup close control in a 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.