Category: Uncategorized

Plain text trigger

How To Close a Popup After Clicking a Link

You’ve got a popup with a link. You want to make sure to close a popup after clicking the link. You’ve come to the right place.

If you’ve got a popup that has a link to another page, this guide shows you how to do the following:

1) Open a page in a new tab.

2) Close a popup after you click the link.

We’ll begin with a popup that has a simple link that opens a page in a new tab. Here’s what that HTML could look like.

<a href="https://www.website.com" target="_blank" rel="noopener">Link Text</a>

Here’s what we should see when we have a similar link in our popup, and we click on it.

As you can see, a page opens in a new tab, but the popup stays open in the first tab. That’s only half of our goal.

Step 1: Add popmake-close and pum-close CSS classes

Edit your link as HTML. 

Add the Popup Maker CSS classes popmake-close and pum-close to your a tag (link tag). These classes tell Popup Maker to close a popup when we click a link that have those classes. 

Here’s our link now.

<a class="popmake-close pum-close" href="https://www.website.com" target="_blank" rel="noopener">Link Text</a>

Here’s a demo of what we should see after adding those 2 CSS classes.

OK, cool. Our popup is closing now. But our new tab isn’t opening anymore. What gives?

That leads us to the next step. We told Popup Maker to close a popup with 2 CSS classes. The missing ingredient is to tell Popup Maker to also open the link (i.e., do the link’s default behavior).

Step 2: Add pum-do-default CSS class or data-do-default attribute

Add the pum-do-default class or use the data-do-default attribute to your a tag to open the new page.

Example 1: Here we add the pum-do-default class to open the link.

<a class="popmake-close pum-close pum-do-default" href="https://www.website.com" target="_blank" rel="noopener">Link Text</a>

Example 2: In this example, we add data-do-default="true" as its own link attribute to open the new page.

<a class="popmake-close pum-close" href="https://www.website.com" target="_blank" rel="noopener" data-do-default="true">Link Text</a>

Publish or Update your popup to save your changes.

Putting it all together, here’s what we should see after doing step 2.

There we have it. The link in the popup opens a page in a new tab, and then Popup Maker closes the popup in the original tab. Mission accomplished 🎉

What about the close button shortcode? #

We can also open a page in a new tab and close a popup using Popup Maker’s Popup Close Button shortcode.

You can add the Popup Maker close button shortcode via the Popup Maker shortcode button menu in the classic editor’s toolbar.

If you don’t see the shortcode button menu in the toolbar, make sure your Popup Maker Settings > Misc > Disable the Popup Maker shortcode button setting is not checked (it should be off by default).

From the shortcode button menu, click Popup Close Button.

In the General tab, do the following:

1. Type the text for your link in Content text area.
2. Select a for the HTML Tag.
3. Enter the URL for the link in the Value for href field.
4. Type _blank in the Target for the element field.
5. Click Save.

 

In the Options tab, check the Do not prevent the default click functionality setting (turn it on). Then, click Save.

Remember to click Publish or Update to save your changes.

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Random H2 heading

Here’s a cool image

---

This is a container block. This container should have a max width of 600 px and a min of 280 px. And that works! 🎉

Testing referrer ATC trigger.

Copy link to highlight test.

Launch RC Ajax popup