Modal uses v-model to show some UI in front of other content. It provides a backdrop and supports flexible content and actions.
The default modal usage. Demonstrates the basic open/close pattern with v-model.
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
The Modal components include the following:
The Modal component is the wrapper around the ModalBox. It shows the backdrop and controls open/close state.
| Modal Props | Type | Description |
|---|---|---|
model-value | boolean | Allows external control of the open/closed state. Use with the default |
close-on-click-outside | boolean | When enabled, closes the modal when clicking the modal backdrop. default: true |
placement | string | Sets the side on which the modal will open to any of the below props. |
| top | boolean | Aligns the modal to the top of the window. |
| bottom | boolean | Aligns the modal to the bottom of the window. |
| start | boolean | Aligns the modal to the start of the window. |
| end | boolean | Aligns the modal to the end of the window. |
The ModalBox is the content box for the modal. It sits directly in front of the dark modal backdrop.
The ModalAction is the container for modal action buttons.
By default, the modal will close when clicking the backdrop. You can disable this behavior by setting close-on-click-outside to false.
Or you won't be able to close this modal, because it uses `:close-on-click-outside="false"`
Aligns the modal to the top of the window using the top prop.
Wanna buy a sundial?
Aligns the modal to the bottom of the window using the bottom prop.
Wanna buy a sundial?
Aligns the modal to the start (left in LTR, right in RTL) of the window using the start prop.
This modal is aligned to the start of the window.
Aligns the modal to the end (right in LTR, left in RTL) of the window using the end prop.
This modal is aligned to the end of the window.
A wide modal using Teleport to avoid layout issues (e.g., sidebar overlays).