Modal

Overview

The Modal module allows for over-page container elements.

Properties

Size (required) Dropdown Sets the sizing of the modal module. The following options can be used:

  • md

  • xs

  • sm

  • lg

  • xl

  • 2xl

  • 3xl

  • 4xl

  • 5xl

  • 6xl

  • full

Motion Preset (required) Dropdown, default slideInBottom Sets the transition animation of the Module. The following options are available:

  • slideInBottom

  • slideInRight

  • scale

  • none

Lock Body Scroll Checkbox, default disabled If enabled, the body scroll will be locked when modal is open.

Is Centered Checkbox, default disabled If enabled, the modal will be centered vertically on screen.

Close On Overlay Click Checkbox, default disabled If enabled, the modal will close when the overlay is clicked.

Return Focus on Close Checkbox, default disabled If enabled, the modal will return focus to the element that triggered it when it closes.

Preserve Scrollbar Gap Checkbox, default disabled If enabled, the padding-right will be applied to the body element that's equal to the width of the scrollbar.

Modal Content

Background Color String - Valid color string (white) or hex code (#FFFFF) Sets Modal background color.

Border Radius String Sets the Modal border radius (in px or em). Example: 5px or 25%

Top String If defined, sets the position from top of viewport if isCentered is not checked.

Custom Styles (required) String, css style property input Can apply additional CSS styles to customize the modal.

Modal Overlay

Background Color String - Valid color string (white) or hex code (#FFFFF) Sets the background color for the modal overlay.

Custom Styles (required) String, css style property input Can apply additional CSS styles to customize the modal overlay.

Modal Body

Background Color String - Valid color string (white) or hex code (#FFFFF) Sets the background color for the modal body.

Padding String Defines the padding around the edge of the modal body. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 6px or 1em

Margin String Defines the margin spacing around the outside of the modal body. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em

Min Height String Defines the minimum height of the modal body. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 6px or 1em

Min Width String Defines the minimum width of the modal body. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 6px or 1em

Height String Overrides the default height of the modal body. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em

Width String Overrides the default width of the modal body. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em

Background Image String, url If defined, sets the linked image to be the background of the modal body.

Background Repeat String, css property Sets how background images are repeated in the modal body. Options include:

  • repeat-x

  • repeat-y

  • repeat

  • space

  • round

  • no-repeat

Background Attachment String, css property Sets whether the modal body's background image position is fixed within the viewport, or scrolls with its containing block.

Background Position String, css property Sets the initial position for the modal body's background image.

Background Size String, css property Sets the size of the modal body's background image.

Custom Styles (required) String, css style property input Can apply additional CSS styles to customize the modal body.

Close Button

Size Dropdown, default md Sets the sizing of the close button. The following options can be used:

  • sm

  • md

  • lg

Hide Close Button Checkbox, default disabled If enabled, the close button of the modal will be hidden.

Close Icon Color String - Valid color string (white) or hex code (#FFFFF) If defined, overrides the default color of the close button.

Button Border Radius String If defined, sets the close button curve radius. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 5px or 25%

Background Color String - Valid color string (white) or hex code (#FFFFF) Sets the background color for the close button.

Border String, css property Sets the close button's border. It can be used to set the values of border-width, border-style, and border-color.

Padding String If defined, sets the padding space between contents and border of the close button. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 6px or 1em

Margin String If defined, adds margin spacing around the close button. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em

Custom Styles (required) String, css style property input Can apply additional CSS styles to customize the close button.

Nodes

Broadcasters

Modal:on-open

Broadcast event whenever a modal has been opened.

Modal:on-close

Broadcast event whenever a modal has been closed.

Listeners

Modal:open

Opens a modal.

Modal:close

Closes a modal.

Last updated

Was this helpful?