Author: cme
-
Popup Trigger Shortcode
Plain text trigger -
Close a Popup After Clicking a Link
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.
Heads up! If you want to open another popup instead of a page in a new tab, go to Launch a Popup from a Popup or When a Popup Closes.
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.
If you don’t want (or need) to edit a link in HTML, check out how to use the Popup Maker close button shortcode. The close button shortcode will achieve the same thing except without writing any code.Step 1: Add popmake-close and pum-close CSS classes
Edit your link as HTML.
Add the Popup Maker CSS classes
popmake-close
andpum-close
to youra
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 thedata-do-default
attribute to youra
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 🎉
pum-do-default CSS class versus data-do-default attribute
Which way is better? Both and 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.
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:
- Type the text for your link in Content text area.
- Select
a
for the HTML Tag. - Enter the URL for the link in the Value for href field.
- Type
_blank
in the Target for the element field. - 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.
-
Simple Click Open Demo
Want awesome in your inbox? Sign up for the newsletter!
-
Join our webinar!
[fluentform id=”3″]
-
Beaver Builder Draft
This guide shows how quickly you can create beautiful and professional popups using Popup Maker and Beaver Builder. Check out this quick demo.
TO DO: Quick recap of the demo.
TO DO: State the goal of the steps below.
Follow these simple instructions, and you too can enrich visitor experience and drive conversions on your site with engaging popups.
Let’s dive in!
1. Choose a saved Beaver Builder layout
Start by creating a new layout or choosing a pre-made template.
2. Copy the layout’s shortcode
Copy the shortcode for your saved Beaver Builder layout.
3. Edit a Popup Maker popup
Create a new popup or edit an existing one.
4. Paste the Beaver Builder shortcode
Paste the shortcode into the popup editor to add your Beaver Builder layout to your popup.
5. Set up a popup trigger
Set up a popup trigger to make the popup appear on your website.
Be sure to add an Extra CSS Selector, e.g.,
.go-bb-popup
. We’ll add that to your Beaver Builder button in a sec.Optionally, add a cookie to control how often a visitor sees the same popup.
If needed, add a targeting rule to specify where the popup should appear (e.g., a specific post or page).
6. Save your popup edits
Save or publish your changes to make the popup live on your website.
7. Connect your Beaver Builder button to the popup
Remember that Extra CSS Selector that you added back in step 5?
TO DO
8. Save your Beaver Builder edits
TO DO
That’s it! Just follow these steps to create and set up your popups.