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' layer. The overlay layer covers the entire screen and appears to surround the popup container. The popup layer appears to the viewer 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 popup in the Popup Editor. Go to:

‘Popup Settings’(box) >>

'Display' (tab) >>

'Advanced' (category) >>

‘Popup Z-Index’ (field).

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 popup layer is 1999999999. Users do not have control over the z-index value for the overlay layer. The high z-index value for the popup places it well in front of the browser content.

Customize the Popup Overlay Layer from the Popup Theme

The overlay layer background color and opacity (color density) can be customized from within a popup theme. From the WordPress Admin, go to: 'Popup Maker' >> ‘Popup Themes’ >> ‘Overlay Settings’ to inspect and edit the settings.

By default, Popup Maker assigns an overlay background color of ‘white’ (hex value: #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 the preinstalled themes for use in their popup.

Popups and popup themes can also be exported between sites. See the related article below for guidance.

Related article: How To Export and Import Popups Between Sites

Disable 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.

Within the Popup Editor, go to:

‘Popup Settings’ >>

‘Display’ option tab >>

‘Advanced’ option category >>

'Disable Overlay' (checkbox)

and select the checkbox.

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