Modal

A Modal is a popup or dialog that overlays a page's content and, typically, must be interacted with in some way in order to return to the page.

Add a Modal to your design from +Add > Helpers > Modal.

Adding Elements to a Modal

A Modal consists of a transparent overlay and a container div. Any element can be inserted into the container div.

To insert an element into a Modal, select the Modal and then choose any element from the +Add menu. You can also drag and drop elements into the Modal just like any other container.

Modal Styling & Configuration Options

In-editor behavior

This setting determines how the Modal is previewed in the builder.

• Inline - The Modal will be displayed inline with the rest of the design's content.
• Live preview - The Modal will appear as if it were live, overlaying the design's content.
• Hidden - The Modal will be hidden completely in the Builder preview.

Trigger

This setting determines the condition that causes the Modal to appear.

• After number of clicks - Specify a number of clicks after which the Modal will be shown.
• After number of page views - Specify a number of page views after which the Modal will be shown.
• On page scroll - Specify whether the Modal is shown after the user scrolls down a specific percentage of the page, or when the user scrolls up.
• After specified time - Specify a number of seconds after which the Modal will be shown.
• After time inactive - Specify a number of seconds of user inactivity after which the Modal will be shown.
• On exit intent - Show the Modal when the user attempts to leave the page.
• On scroll to element - Specify an element that will trigger the Modal when the element comes in to the viewport. Use the Choose button and then click on the element that should trigger the Modal, or type the element's ID in the field.
• User clicks element - Specify an element that will trigger the Modal when the element is clicked. Use the Choose button and then click on the element that should trigger the Modal, or type the element's ID in the field.

You can also specify the frequency with which the Modal should be shown to a given user with the After Modal is Shown dropdown.

• Show again on every page load - The Modal will be shown every time the page is reloaded and the given trigger occurs.
• Never show again - The Modal will be shown once to a user, and then never shown to that user again.
• Show again after - Specify a number of days after which the Modal will be shown to a user again.

Content Styles

The Content Styles area allows you to set the Modal's child element layout, horizontal item alignment, vertical item alignment, text color, and background color.

Modal Styles

• Width - Set the overall width of the Modal container element. This defaults to %, but may be set to PX or VW by clicking the % symbol and choosing a different unit.
• Backdrop Color - Set the color of the backdrop. If you want no backdrop, move the alpha slider to 0.
• Modal Position - Set the position of the Modal container element.

Closing

This setting allows you to determine the closing behavior of a Modal.

• Close Modal Automatically - If yes, allows you to specify a number of seconds after which the Modal will be closed automatically.
• Close on ESC key - If yes, pressing the ESC key will close the Modal.
• Close Modal On Backdrop Click - If yes, clicking the backdrop of the Modal will close it.
• Insert Close Button - Inserts a button that, when clicked, will close the Modal.

Any element with the .oxy-close-modal class will act as a close button, allowing you to use Icons and other elements as close buttons for your Modal.

Additionally, you may use JavaScript to close the Modal via the oxyCloseModal() function. This option gives advanced users more flexibility in determining when and how a Modal is closed.