Skip to Content
Try Prodio for free
DocumentationWorkflowsStep typesModal

Modal Step

A modal is a dialog card that appears in the center of the screen with a dark overlay. It is typically used to capture user attention or to provide more information.

General Properties

Title

Bold text at the top of the modal used to introduce the step. Supports HTML.

Body

Main content of the modal used to provide more information about the step. Supports HTML.

Hide Close Button

If enabled, the close button will not be shown in the modal. This can be useful if you want to force the user to interact with the modal before continuing. Use this option with caution, as it can make the onboarding experience less user-friendly.

Overlay

If enabled, the modal will be highlighted with a semi-transparent overlay. This can be useful to draw attention away from the rest of the page. You can change the color and opacity of the overlay in the Style Template at the project level.

Enabled by default.

Close on Overlay Click

If enabled, the modal will be closed when the user clicks on the overlay, and the workflow will end. This gives the user a quick way to dismiss the workflow if they are not interested in it.

  • Can be enabled only if the overlay is enabled.
  • Can’t be combined with the disable overlay click layer.

Disable Overlay Click Layer

If enabled, the overlay will not prevent the user from interacting with the elements behind it. This can be useful if you want to allow the user to interact with the page while the modal is open, or if you have complex UI elements that are not working correctly with the overlay.

  • Can be enabled only if the overlay is enabled.
  • Can’t be combined with close on overlay click.

The footer properties allow you to customize the footer buttons of the modal.

Wait

The wait properties allow you to control what the modal should wait for before continuing to the next step.

Advanced

Step ID

Unique identifier of the step. This is optional but can be useful for programmatic control of the workflow.

Custom z-index of the modal. This can be useful if the modal is not displayed correctly because of the z-index of other elements on the page. The value is applied only to the step where it’s set.

Defaults to CSS variable var(--workflows-zIndex) from the style template.

Last updated on
TooltipBanner