How To Close a Modal Popup on the Click of a Button or Text?

We’ve already seen how you can create a modal popup using Elementor and the Ultimate Addons for Elementor. You can design it as per your needs and control its behavior too.

What if you wish to allow users to close the popup when they click on some text or a button present on it?

You can do this too!

You can use the “uael-close-modal” class to do so.

All you need to do is:

1. Under the Content tab of Modal popup settings, select Type = Content.

2. Open the text tab of the content section and add your HTML code. Use the class within any HTML tag that you wish to add.

Example

• Closing a popup on the click of a text.

<span class=”uael-close-modal”>Continue shopping</span>

Here, the modal popup will get closed when the user clicks on the text “Continue shopping”.

• Closing a popup on the click of a button.

<button type=”button” class=”uael-close-modal”>Click Me!</button>

Here, the modal popup will get closed when the user clicks on the button.

Similarly, you can add any HTML tags and use the class in it so that the modal popup is closed when the user clicks on the specific element.