Articles on: Extras/Advanced

How to Customize the Popup Closing Options

There are many ways one can customize the popup closing. Some options are free while the others are available with the Advanced Closing extension.
This article will show the options which are available with the free version of Popup Builder plugin as well as the options available with the Adcvanced Closing.


The Advanced Closing extension is paid. It can be purchased either within the bundles or as a single extension.


Once purchased it should be installed like this:
• In case of the bundle click here.
• In case it was purchased as a single extension click here.


Most of the closing options are available under the Closing section

Those are:


  • Dismiss on "esc" key - The popup will be closed once the esc button on the keyboard is clicked.
  • **Show "close" button ** - If you decide to show this button, then you can specify the Button delay, Button position and Button image.


Button delay - this option is specified in seconds and can be used to show the close button with a delay after the popup is opened. If nothing is specified here, the button will be shown by default with no delay. The button position options can be changed. Depending on the Theme (see the Design section) there may be different position options. Use the button image for each theme or change to the one you wish.


  • Dismiss on overlay click - Once you check this, the popup will be closed if clicked on the overlay.


The overlay is the dark background which appears once the popup is displayed on the web page.


  • Disable popup closing - Check this option if you don't want the visitors to be able to close the popup. This option is available with the Advanced Closing extension.


  • Auto close popup- Auto closing popups is available with the Advanced Closing extension. Once it's enabled, you will see the following options:
  • Auto close after - you can set the seconds after which the popup should be closed.
  • Show Countdown - if enabled, a countdown of the popup closing will be shown.
    You can specify the countdown position, top/bottom and right/left distance in pixels, the Digits Color and the Background Color.
  • Close Popup After Page Scroll - The popup will be closed when the web page is scrolled. This option is available with the Advanced Closing extension.





The popup closing can be customized from the Design section as well.


There are options to customize the overlay by clicking which it's possible to close the popup.


Enable popup overlay - An option available with the **Advanced Closing **extension.
The option is checked by default. If you uncheck it, you won't see any overlay.
Once it is checked you will see these options:

  • Overlay custom css class - Add your desired custom CSS class.
  • Change color - A great way to change the overlay color, which can be matched with the popup color.
  • Opacity - This way you can change the opacity of the overlay so that the content will be more visible or more faded.




Another section for the popup closing is the Advanced.


Check below to see the only available close setting


  • Popup Closing Animation - This option is disabled by default. If you enable it, you can choose the animation Type from the dropdown and set the Speed in seconds.




We hope you will like using the different closing options the Popup Builder provides.



Updated on: 15/04/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!