WireScript
Components

modal

Centered modal dialog.

A centered modal dialog overlay. Defined inside screens and triggered by :to "#id".

Usage

Opening a Modal

(button "Open Modal" :to "#my-modal")

Closing a Modal

(button "Close" :to :close)

Flags

FlagEffect
:openModal is initially open
:rowHorizontal layout
:colVertical layout
:centerCenter alignment
:startStart alignment
:endEnd alignment
:betweenSpace between
:fullFull size
:fillFill available space

Properties

PropertyTypeExample
:idstring:id "confirm"
:gapnumber:gap 16
:paddingnumber:padding 24
:widthnumber:width 400
:heightnumber:height 300

Note: Default max width is 600px or 90% of container.

Examples

Initially Open Modal

Confirmation Modal

Form Modal

Info Modal

Image Preview Modal

Multi-step Modal

On this page