Use as Modal Panel
UI Navigation Map: Use as Modal panel
Go to the Module Editor, then in the Top Bar click Settings to open the Settings Sidebar then:
- Use as Modal Panel
- Modal Settings Section
- Page Scroll Allowed
- Toggled Body Class
- Style and Position Section
- Modal Alignment
- Pop Up Speed
- Underlay
- Color
- Embedding Section
- How to Embed
- Modal Settings Section
The Use as Modal panel is accessed by going to the Module Editor, then the Top Bar, then clicking the Settings button to open the Settings Sidebar, and finally clicking Use as Modal.
In the Use as Modal panel configure how a module looks and behaves when it is opened as a modal, which is a popup shown on top of the current page. These settings only take effect when the module is opened as a modal. Opening a module as a modal is set up separately, either by embedding it with the modal shortcode shown under How to Embed, or by triggering it with an Open Modal action in Action Mode.
Modal Settings Section
In the Modal Settings section set whether the page behind the modal can scroll, and optionally set a CSS class to be applied while the modal is open.
Page Scroll Allowed (Toggle)
Sets whether the page behind the modal can still be scrolled while the modal is open.
Options:
- On: The page behind the modal can be scrolled while the modal is open.
- Off: The page behind the modal is locked in place and cannot be scrolled while the modal is open.
Toggled Body Class (Text)
Sets a CSS class name to be added to the page’s <body> element while the module is open as a modal, and removed when it closes. Use it as a styling hook to target the rest of the page with custom CSS while the modal is showing.
Style and Position Section
In the Style and Position section set where the modal appears on screen, how fast it opens, and the underlay drawn behind it.
Modal Alignment (3×3 Checkbox Grid)
Sets where the modal is positioned on the screen. The 3×3 grid represents the corners and edges of the page, e.g. to align top left choose the top left checkbox.
Pop Up Speed (Number, milliseconds, range)
Sets how long the modal’s opening animation takes, in milliseconds. Lower values open the modal faster, and 0 opens it instantly.
Options:
- 0ms: Minimum. The modal opens instantly with no animation.
- 5000ms: Maximum. The modal takes five seconds to finish opening.
Underlay (Toggle)
Sets whether a colored underlay is drawn behind the modal, covering the page to set the modal apart from the content beneath it.
Options:
- On: An underlay is drawn behind the modal, using the Color setting.
- Off: No underlay is drawn, and the page behind the modal stays fully visible.
Color (Color Swatch)
Setting Visibility
- Visible when Underlay toggled to On.
- Hidden when Underlay toggled to Off.
Sets the color of the underlay shown behind the modal.
Embedding Section
How to Embed (Button)
Opens a dialog listing the ways to embed this module. It provides the standard shortcode, a modal shortcode that opens the module as a modal, a widget option, and PHP functions for adding the module directly in theme files. Use the modal shortcode when you want the module to open as a modal rather than display inline.
