Display Different Popup and Overlay Scroll Effects in Combination
We often receive support requests about option settings to fix popups in place, or allow them to move up and down. Various display option settings have different effects on popup scrolling inside the browser. Here is the definitive guide to our popup display option settings to achieve your desired effect.
Popups Are Positioned In Front of Content
A quick glance at an open popup inside a web page suggests that all the browser content is one entire piece. What you see is actually made of layers, one appearing in front of the other. From front to back, the layers appear in the following order:
- 'Popup' -- the container in which the popup content appears.
- 'Overlay' -- the background rendered by our plugin that appears behind the popup and 'lays over' the site content.
- 'Content' -- the actual site content that appears behind the overlay and the popup.
Related article: Popups Display In Front of Screen Content
Display Four Different Popup Scroll Effects
Users can vary how their popups scroll depending on the combination of settings for a popup and overlay layer relative to the page content. The plugin's default display effect is listed in the first row of the following table.
| Effect | Popup | Overlay | Content |
| Popup, overlay & content are each stationary. | Stationary | Stationary | Does not scroll |
| Popup and content scroll together. | Fixed position. Popup moves with content scroll. |
None | Scrollable |
| Popup is stationary. Content scrolls behind popup. | Stationary | None | Scrollable. Content scrolls behind popup |
| Content scrolls inside popup container. | Stationary. Content scrolls inside popup | Set to either stationary or none. | Set to either stationary or scrollable. |
Popup and Overlay Option Settings for Each Effect
To achieve each of these effects, accept or set the Popup Settings options described below.
1) Popup, overlay & content are each stationary -- This is the default effect set by the plugin. Do nothing, and accept the default settings for the popup in the Popup Settings box.
2) Popup and content scroll together -- Disable (turn 'off') the popup overlay layer.
- In the Editor, go to: 'Popup Settings' (box) >> 'Display' (tab) >> 'Advanced' (category).
- Select the checkbox labeled 'Disable Overlay'.
3) Popup is stationary. Content scrolls behind popup -- Enable two settings; (a) fixed positioning AND (b) disable overlay.
a) Fixed positioning option:
- Go to 'Popup Settings' (box) >> 'Display' (tab) >> 'Position' (category).
- Select the checkbox labeled 'Fixed Positioning'.
b) Disable overlay option:
- Repeat the setting described in item (2) above.
4) Content scrolls inside popup container -- Activate the scrollable content feature to accommodate content taller than the height of a popup.
- In the Editor, go to: 'Popup Settings' (box) >> 'Display' (tab) >> 'Size' (category).
- From the 'Size' option menu, select 'Custom'.
- Select the check labeled 'Scrollable Content'.
For details about popup size option settings, see the related article below.
Related article: 'Display' option settings