Skip to content

Dialog

A dialog is an overlay element that appears above your page content to focus user attention. It creates a dedicated interaction space for forms, confirmations, or additional content.

The Dialog element can be configured into three UI patterns:

  1. Modal window - centered overlay for forms and detailed content
  2. Alert dialog - focused overlay for confirmations and notifications
  3. Sheet element - full-width/height panel that slides in from any screen edge

Getting Started

  1. Add a Dialog element to your page
  2. Preview your Dialog by clicking 'Toggle dialog' in the side panel
  3. Customize the appearance and behavior through Dialog properties

Opening & closing dialogs from anywhere

By default, the Dialog element will open when you click on it, but you can also choose from where and when you want this behavior to happen. To do so, you need to use component actions.

  1. Disable the Trigger property of your Dialog:

Trigger off

  1. Create a custom trigger:
  • Select any element you want to use as a trigger
  • Add a workflow to this element (typically on click)
  • Use Execute component action in the workflow
  • Select your Dialog and choose Open, Close, or Toggle

Dialog open

When you click the element you selected, it will open the Dialog:

Trigger off

TIP

Dialog control uses component actions instead of boolean variables. You can trigger your Dialog from any workflow, not just clicks. Examples include:

  • On page load
  • On mouse enter
  • On double click
  • After form submission

Learn more about workflow triggers in our Triggers documentation.

Properties

Type & Position

PropertyOptionsDescription
TypeModal, Sheet, NoneModal: Overlay window with flexible positioning. Sheet: Full-width/height panel on screen edges. None: Unstyled base for custom designs.
Sheet PositionLeft, Right, Bottom, TopWhen using Sheet type, choose which screen edge it appears from
Modal PositionLeft, Center, Right, CustomPosition your Modal horizontally on screen
Modal AlignmentTop, Center, BottomAlign your Modal vertically on screen
Custom Position (X,Y)Custom valuesSet exact coordinates when using Custom position

Animation

PropertyOptionsDescription
AnimationNone, Fade, Zoom in, Slide inChoose how your dialog appears
DirectionLeft, Right, Top, BottomChoose slide direction when using Slide in animation
DurationCustom valueSet how long the animation takes
EasingLinear, Ease in, Ease out, Ease in outControl how smooth the animation feels

Interaction Settings

PropertyOptionsDescription
Prevent scrollingOn/OffControl if users can scroll the page behind an open dialog
Escape key to closeOn/OffAllow closing the dialog with Escape key
TriggerOn/OffShow/hide the default opening trigger
Trigger click closesOn/OffControl if clicking the trigger closes an open dialog
OverlayOn/OffAdd a background overlay behind the dialog
Overlay click closesOn/OffClose the dialog when clicking the overlay
Click outside closesOn/OffClose the dialog when clicking outside it
ModalOn/OffAllow/prevent interactions with content behind the dialog

TIP

We recommend experimenting with these properties to see their visual effects in action.

TIP

You can place the Dialog anywhere. To ensure the overlay covers the whole screen, enable the Z axis property for the Dialog.

Retrieving data from form inputs

When you place a Dialog containing form inputs inside a repeating group, the inputs will lose their values due to how WeWeb handles state.

In this example, we placed a Dialog with a form input inside a repeating group and entered the value "Hello":

Dialog open

When accessing the Variables tab, no value is found:

Dialog no value

To fix this, you can either:

  1. Place the Dialog outside the repeating group (recommended)

Or store the input values manually:

  1. Add an On change workflow to your input
  2. Capture the input value from the Events tab
  3. Save it to a variable

Dialog event