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

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.

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.

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

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

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.

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!

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

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.

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.

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.

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.

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!

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.