How to 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:

  1. 'Popup' -- the container in which the popup content appears.
  2. 'Overlay' -- the background rendered by our plugin that appears behind the popup and 'lays over' the site content.
  3. '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 - Size' option settings