Source: https://tailwindcss.com/plus/ui-blocks/documentation/dialog

Getting started
Elements
- Introduction
- Autocomplete
- Command palette
- Dialog
- Disclosure
- Dropdown menu
- Popover
- Select
- Tabs

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Dialog

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

The <el-dialog> component is a lightweight wrapper around the native <dialog> element that adds scroll locking, click-outside-to-close support, and smooth exit transitions that work consistently across all browsers. It builds on standard HTML APIs while making dialogs easier to use and style.

Component API

<el-dialog>

Wrapper around the native <dialog> element used to manage the open state and transitions.

| | | | --- | --- | | Attributes | | | open | A boolean attribute that indicates whether the dialog is open or closed. You can change the attribute to dynamically open or close the dialog. | | Data attributes (Read-only) | | | data-closed | Present before transitioning in, and when transitioning out. | | data-enter | Present when transitioning in. | | data-leave | Present when transitioning out. | | data-transition | Present when transitioning in or out. | | Events | | | open | Dispatched when the dialog is opened in any way other than by updating the open attribute. | | close | Dispatched when the dialog is closed in any way other than by updating the open attribute. | | cancel | Dispatched when the user attempts to dismiss the dialog via Escape key or clicking outside. Calling preventDefault() prevents the dialog from closing. | | Methods | | | show() | Shows the dialog in modal mode. | | hide() | Hides the dialog. Takes an optional object with a restoreFocus property to disable the default focus restoration. |

<dialog>

The native dialog element.

| | | | --- | --- | | Commands | | | show-modal | Opens the dialog. | | close | Closes the dialog. |

<el-dialog-backdrop>

The visual backdrop behind your dialog panel.

| | | | --- | --- | | Data attributes (Read-only) | | | data-closed | Present before transitioning in, and when transitioning out. | | data-enter | Present when transitioning in. | | data-leave | Present when transitioning out. | | data-transition | Present when transitioning in or out. |