How To Display Multiple Popups at the Same Time

Overview

Set the plugin option settings to display 2 popups at the same time. These instructions work best for popups viewed on a desktop-sized screen. 

On mobile-sized screens, responsive-sized popups will stack one on top of the other. The top-most popup will cover over any popups stacked behind it. 

Introduction

By default, Popup Maker is set to display one popup at a time. To display two or more popups, each popup must be set to 'stackable'. 

1) Create Two Popups and Set to 'Status: Published'

In the article link below, refer to the section 'On Hover, Edit Options Appear Beneath Popup Name'. From the 'All Popups' admin screen, use the Quick Edit link to check that 'Status: Published' for each popup that will be set to 'stackable'. Popups that are not set to 'Published' will not appear on the front end. 

Related article: Popup Maker Admin Introduction

2) Change the Default Popup Size of the Stackable Popups

From the popup editor, go to ‘Popup Settings’ >> Display >> Size' and change the default popup size from ‘Medium — 60% (responsive)’ to a smaller value. Start with ‘Small — 40% (responsive)’. This will allow both popups to display on a desktop-size screen without overlapping each other. 

Related article: 'Display - Size' option settings

3) Set the 'Fixed Positioning' Option

In ‘Popup Settings >> Display >> Position’, check the ‘Fixed Positioning’ checkbox. 

Related article:  'Display - Position' option settings

4) Anchor the Popup Position by 'Location'

In ‘Popup Settings >> Display >> Position >> Location (option), select the anchor point for the popup. For example, set the first popup to ‘Top Left’, and the second popup to ‘Top Right’. Each popup will anchor to a position on the opposite side of a desktop screen. 

Related article: 'Display - Position' option settings

5) Set the 'Stackable' Option 

In 'Popup Settings >> Display >> Advanced' (category), check the ’Stackable' option checkbox.

Related article:  'Display - Advanced' option settings

By default, the Popup Z-index value for the popup container is preset to 1999999999. Accept the default plugin setting. 

To understand z-index values, view the article below.

Related article: Popups Display In Front of Screen Content

6)  Set the Same Targeting Conditions for Both Popups

In ‘Popup Settings’ >> ’Targeting’, set the same targeting conditions for both popups. This ensures they both appear according to same set of conditions. 

Related article: ‘Targeting’ option settings

Related article:  Conditions Introduction

7)  Set the Same Popup Theme on Both Popups

In ‘Popup Settings’ >> Display >>  Appearance' (category), set each popup to use the same theme.  This ensures there is no conflict in the appearance of either popup container or their overlay (background) layer. 


Troubleshooting

If one popup appears to disappear behind the other on the front of the site, use the following recommendations to guide your problem solving.

1)  In ‘Popup Settings >> Display >> Position >> Location' (option), check the ‘Location’ option setting for both popups. Set each popup to anchor opposite one another within the browser. 

2)  In the WordPress admin, go to 'Popup Maker' >> 'Popup Theme' >> {name-of-assigned-theme}. View the settings for ‘Overlay Settings’ >> Opacity'

Change the value from 100% (fully opaque; not transparent) to a lesser value (for example, 25%). This will increase the transparency of the overlay layer behind the popup container. You may find it easier to observe the position of the first popup stacked beneath the second popup. 

3)  In ‘Popup Settings’ >> Display >> Size' (category) on both popups, change the ‘Size’ option from the default value of ‘Medium — 60%’ to a smaller value. This will reduce the size of each popup container, and reduce the chance that they overlap each other.