Popups Display In Front of Screen Content

Popup Maker displays it’s content in front of the content on the screen. The plugin renders 2 layers within the browser, an ‘overlay’ and a ‘popup (container)’ layer. The overlay layer covers the entire screen and appears behind the popup container. The popup layer appears in front of the overlay layer. 
The CSS ‘z-index’ property controls the placement of the overlay and popup layers. Plugin users can manage the z-index values for each layer inside the Popup Admin at ‘Display Settings’ >> ‘Z-index’

Figure 1 (above). The CSS ' z-index' property determines the order in which elements appear along a z-axis coordinate in a web browser.  In Popup Maker, the overlay and popup layers appear in front of the browser content. 

Image source:  https://tympanus.net/codrops/css_reference/z-index/

Popup Maker sets the z-index values for the overlay and popup layers very high relative to the content layers located behind them. By default, the z-index value for the overlay layer is set to 1999999998 and the popup layer is 1999999999. The higher z-index value for the popup places it in front of the overlay layer. 

Customizing the Popup Overlay Layer from a Popup Theme

The overlay layer background color and opacity (color density) can be customized from within a popup theme at ‘Popup Themes’ >> ‘Overlay Settings’. By default, Popup Maker assigns an overlay background color of ‘white’ (hex: #ffffff), and opacity of 100% (alpha = 1.0). New popups are assigned the ‘Default Theme’. 
Plugin users can select from among 6 popup themes that come preinstalled with the plugin. They can also customize and rename any of those themes for use in their popup. 

Disabling the Popup Overlay Layer from the Popup Admin

The popup overlay layer is enabled within each new popup. Plugin users can disable the overlay layer from the Popup Admin. Go to ‘Display Settings’ >> ‘Overlay’ >> ‘Disable Overlay’ and select the checkbox. 

The checkbox description says: “Checking this will disable and hide the overlay for this popup.”. Select the popup ‘Update’ button to save your changes. 

Still need help? Contact Us Contact Us