Close a Popup When a Link Inside the Popup Is Clicked

Usage #

Follow this approach when you want to:

  • Set a link to a remote URL inside a popup. The URL can be an internal or external URL relative to the site domain name. 
  • Close the popup when the link is clicked. 

This method uses HTML to wrap the link content ( text, image, or graphic ).  Write the HTML on the Text tab of the content editor. 

Comparison to the Use of the Popup Close Shortcode #

The Popup Close shortcode can close a popup by targeting content inside the popup container. However, the shortcode is not cannot redirect a visitor to another URL on close. If you need to close a popup and redirect the visitor to another URL, then continue reading after the related articles section.

Related article: Shortcode Button

Related article: Shortcode: Popup Close

In the examples below, we'll:

  1. Use an HTML link with "Link Text" as the text. 
  2. Add the Popup Maker CSS classes popmake-close and pum-close to close the popup when we click the link. 

Note: You can style the button in your theme's stylesheet by targeting the class attributes for the anchor (<a>) tag. You can add your custom classes if you don't want to use the default Popup Maker classes. 

Example 1: In this example, the data-* attribute is defined independently of the class attributes.

<a class="popmake-close pum-close" href="" target="_blank" rel="noopener" data-do-default="true">Link Text</a>

Example 2: Instead of using the data-do-default attribute, you can also use the pum-do-default class to the link tag.

<a class="popmake-close pum-close pum-do-default" href="" target="_blank" rel="noopener">Link Text</a>

W/hich way is better? Neither. They'll do the exact same thing. It's just a matter of preference whether you want to use a data attribute or a CSS class name.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.