Flux Product Docs
  • What is Flux?
  • Guides
    • Creating a Premium Video
    • Creating Your First Site
    • Creating a Countdown
    • Creating a Navigation Bar
    • Creating a Group
    • Custom 404 Page
    • Adding a Favicon to Your Site
    • Adding Videos to Your Site
    • Managing Your Guest List
    • Asset Management
    • Creating Sites from Site Templates
    • Publishing Site Versions
    • Advanced Debugging
  • Fundamentals
    • Key Concepts
    • Sites
    • Guests
    • Environments
      • Show Variables
    • Flows
      • Anatomy of a Node
      • Connecting Nodes and Building Flows
      • Passing Data
      • Scope
      • Interpolation
    • Keyboard Shortcuts
      • Keyboard Shortcuts - Page Editor
    • Animation States
    • Local Variables
    • Groups
  • Use Cases
    • For Designers
    • For Engineers
      • Custom CSS
      • Custom Modules
    • For Event Manager
      • Intercom Integration
  • Documentation
    • FAQ
    • Glossary
    • 🚀Show Controller
      • Modes
    • Domains and Subdomains
      • Hover
      • AWS Route 53
    • Premium Live Channels
    • Basic Video
    • Premium Video
      • AI Generated Subtitles
      • Supported Input Codecs and Containers
      • Supported Language Labels
      • Serverside Forensic Watermarking
    • Flow Nodes
      • Middleware
  • Modules
    • Access Code
    • Audio
    • Button
    • Carousel
    • Chat
    • Checkbox
    • Container
    • Countdown
    • Date
    • Embed
    • Image
    • Intercom
    • Link
    • Lottie
    • Page
    • Meter
    • Modal
    • Photobooth Gallery
    • Open Login
    • QR Code
    • Radio
    • Rich Text
    • Stack
    • Style
    • Spline
    • Switch
    • Text Input
    • Video
  • Template Guides
    • NatGeo FYC
      • Adding a Panel
    • Meow Wolf All Shrimps
  • 🚀Change Logs
    • July 12, 2024
    • June 08, 2024
    • April 26, 2024
    • April 12, 2024
    • March 29, 2024
    • March 15, 2024
    • March 1, 2024
    • September 2022
    • August 2022
    • July 2022
    • June 2022
Powered by GitBook
On this page
  • Overview
  • Properties
  • Modal Content
  • Modal Overlay
  • Modal Body
  • Close Button
  • Nodes
  • Broadcasters
  • Listeners

Was this helpful?

  1. Modules

Modal

Last updated 2 years ago

Was this helpful?

Overview

The Modal module allows for over-page container elements.

Properties

  • md

  • xs

  • sm

  • lg

  • xl

  • 2xl

  • 3xl

  • 4xl

  • 5xl

  • 6xl

  • full

  • 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

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

Modal Overlay

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

Modal Body

  • repeat-x

  • repeat-y

  • repeat

  • space

  • round

  • no-repeat

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

Close Button

  • 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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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%

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

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

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

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

Size
Motion Preset
Background Color
Border Radius
Top
Background Color
Background Color
Padding
Margin
Min Height
Min Width
Height
Width
Background Image
Background Repeat
Background Attachment
Background Position
Background Size
Size
Button Border Radius
Background Color
Border
border-width
border-style
border-color
Padding
Margin