View Categories

Launch a Popup from a Popup or When a Popup Closes

In this article, you’ll learn how to:

  1. Launch a popup from a popup 🚀
  2. Display another popup when one popup closes

Heads up! If you want to open a page in a new tab instead, go to Close a Popup When a Link Inside the Popup Is Clicked.

Let’s get to it!

Launch a Popup From a Popup #

Create the First Popup #

1) Head over to Popup Maker > Create Popup in your WordPress admin area.

Popu Maker &Amp;Gt; Create Popup

2) Add some content.

3) Create a NEXT button that has the class launch-456. Use the code below.

<button class="launch-456" type="button">NEXT ></button>

launch-456 is the trigger class for the second popup you’ll make. More on that in a minute.

Pro tip: In fact, any tag you add that launch-456 class can launch your second popup. Learn more about adding extra CSS selectors to popup triggers.

Here’s an example using the popup editor’s Text tab.

File Vebytii6O2

Here’s what that code looks like in the editor’s Visual tab.

File H6Ypmwmj6I

4) Add a Time Delay / Auto Open trigger. For this demo, we want your first popup to open automatically when you visit any post or page on your site.

5) Make sure you enable your popup and click Publish.

Create the Second Popup #

1) Head over to Popup Maker > Create Popup in your WordPress admin area.

2) Add some content.

3) Add a Click Open trigger. Enter .launch-456 to your Extra CSS Selectors setting. Notice this time we put a period (.) in front of the class name.

Your popup trigger should look something like this when you’re done.

File Mdtyrglg4L

Notice that the Extra CSS Selectors setting in popup 2 matches the class for the NEXT button in popup 1.

4) Make sure you enable your second popup and click Publish too.

Take it for a Test Drive #

Now, it’s time to test your work! Navigate to any page on your site. When the first popup displays, click on NEXT to launch the second one. Yay!

File

For extra credit, inspect the NEXT button on your first popup. Can you locate the “magic” class that launches your second popup?

File Dtenqs1M1I

Display Another Popup When One Popup Closes #

This is a variation of what we did above. The big difference is you’ll click on the first popup’s close button to launch this second popup.

To make this possible, we’ll need to do 2 key steps:

  1. Get the close button’s CSS selector on that first popup. 
  2. Once we have that CSS selector, we’ll add it to our second popup’s Click Open trigger Extra CSS Selectors setting.
Note: If you create 2 new popups for this tutorial, disable the 2 popups from the above tutorial so they don’t “step” on each other.

Create 2 Popups (or reuse the ones from above) #

1) Create the first popup and add a Time Delay / Auto Open trigger. 

2) Make sure your first popup is enabled, then hit Publish.

3) Create the second popup with a Click Open trigger. Keep the popup editor open for now.

Add the Extra CSS Selector to the Second Popup #

1) Navigate to any page on your site and wait for your first popup to display. (Remember: We need to grab the CSS selector from the first popup’s close button.)

2) Right-click on the close button and click Inspect.

File Ulmb1Ocupr

3) The CSS we need will fit the pattern #popmake-nnn .pum-close.popmake-close. Verify that pattern when you inspect the HTML. Make a note of the number after “popmake-“. That’s the first popup’s ID number.

Using the example below, the extra CSS selector we need to add to our second popup will be:  #popmake-922 .pum-close.popmake-close. 922 is our first popup’s ID number.

File

Above: HTML code for the first popup’s close button.

4) Go back to your open popup editor (the one with the second popup). You should still have the Click Open trigger Extra CSS Selectors setting open.

Add the extra CSS selector you got from the step before. Your second popup’s  Extra CSS Selectors setting should look something like this when you’re done.

File Dyp78Cfktn

Above: The Extra CSS Selector setting for the second popup.

Kick the Tires #

Are you still with me? OK. Let’s test it out. 

Navigate to any page on your site. When the first popup displays, click its close button to launch the second one. Woo hoo!

File Gqbqxevj6L

Troubleshooting #

If your second popup doesn’t show up, there are 2 things you can do:

  1. It’s easy to mix up the first and second popup. Double-check your Extra CSS Selectors setting in the *second* popup’s Click Open trigger. Make sure the CSS matches what’s in the HTML for the corresponding button in your *first* popup.
  2. Sometimes a CSS conflict can block the second popup from showing. If you run into that issue, try adding this CSS.
    .pum-overlay.pum-active, 
    .pum-overlay.pum-active .popmake.active {     
    	display: block !important;     
    }
    	

    Clear all of your caches (and cookies if needed) and test.

  3. If that first CSS doesn’t work, try adding an extra line of code: opacity: 1 !important; . Here’s the full example with the extra line of CSS.
    .pum-overlay.pum-active, 
    .pum-overlay.pum-active .popmake.active {     
    	display: block !important;     
    	opacity: 1 !important;  /* Here's the extra line to add only if needed. */ 
    }
    	

    Clear all of your caches (and cookies) again and retest.

  4. It’s easy to mix up the first and second popup. Double-check your Extra CSS Selectors setting in the *second* popup’s Click Open trigger. Make sure the CSS matches what’s in the HTML for the corresponding button in your *first* popup.

Still not showing? #

After checking those 2 things and the second popup still doesn’t show, check the  Targeting settings for that second popup. Make sure there are no rules stopping the second popup from displaying on your page.

If you need help with your popup, we’re only a click away.

Head over to our support page to submit a ticket, join our Facebook group, or check out all of our resources.

If you liked this and want more, check out our Make a Slide Show Using Back to Back Popups how-to guide. 

Leave the first comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.