---
title: Launch a Popup from a Popup or When a Popup Closes
description: "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…"
url: "https://wppopupmaker.com/docs/apply-popup-maker/launch-a-popup-from-a-popup-or-when-a-popup-closes/"
updated: "2024-12-24"
category: How To / Apply Popup Maker
---

# 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](https://wppopupmaker.com/docs/apply-popup-maker/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](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms/#admin).

![Popu Maker > Create Popup](https://d33v4339jhl8k0.cloudfront.net/docs/assets/559c68b9e4b03e788eda1692/images/61037ffcb37d837a3d0df01e/file-JcHMK9mEhO.jpg)

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](https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/#extra-css-selectors) to popup triggers.

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

![file VeByTIi6O2](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61bac57b67de684e3e436bf1/file-VeByTIi6O2.jpg)

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

![file H6YPMWmJ6I](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61bac75df6f9273f6aaa3d2b/file-H6YPMWmJ6I.jpg)

4) Add a [Time Delay / Auto Open](https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/#time-delay) 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](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms/#admin).

2) Add some content.

3) Add a [Click Open trigger](https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/#add-a-new-popup-trigger). Enter `.launch-456` to your [Extra CSS Selectors](https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/#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](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61baee87f6f9273f6aaa3d62/file-mDtYrgLG4l.jpg)

  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](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61baf1ce67de684e3e436c20/file-LlRsAWxKW8.gif)

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

![file dTenQs1m1i](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61baf2b7f6f9273f6aaa3d68/file-dTenQs1m1i.jpg)

## 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](https://wppopupmaker.com/docs/getting-started/a-beginners-guide-to-popup-triggers/#time-delay) trigger. 

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

3) Create the second popup with a [Click Open trigger](https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/#add-a-new-popup-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](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61baf86267de684e3e436c2e/file-ulMB1oCuPR.jpg)

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](https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/).

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](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61baf8eed172c11fdd3244a5/file-DLmLmxwyXb.jpg)

**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](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61bafadda96f3c15c4d89b42/file-dYP78CfKTN.png)

**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](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/61bafccef6f9273f6aaa3d90/file-GqBQXeVJ6L.gif)

## 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](https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-css/).
   ```
   .pum-overlay.pum-active, .pum-overlay.pum-active .popmake.active {     	display: block !important;     }
   ```

   Clear [all of your caches](https://wppopupmaker.com/docs/problem-solving/troubleshooting-your-first-popup/#did-you-clear-out-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](https://wppopupmaker.com/support/) 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](https://wppopupmaker.com/docs/apply-popup-maker/make-a-slide-show-using-back-to-back-popups/) how-to guide.