The Dialog (VX) widget allows you to quickly create popup dialogs and modals.

This is a nested widget, which means you can place other widgets within it.

How to use

First, place the widget on the canvas. After placing the widget, define the label and icon for the Trigger button.

In the Style tab, you can customize styling for the trigger button among other things.

Next, back to the Content tab, enable “Toggle view in editor” switch. This will make the dialog content visible.

You can now place widgets within the dialog content modal.

As an example, let’s insert the post description using a Text Editor widget

Final result in front-end.

Benefits

• Browser native: Uses browser-native <dialog> element instead of a custom JavaScript implementation.
• Accessibility: Native keyboard support (Esc to close), automatic focus management, and focus trapping built into the browser.
• No z-index issues: Rendered in the browser’s top layer, above other page content.
• Lightweight: Minimal JavaScript overhead and optimal performance.