Dialog

A dialog component for showing users content which overlays the rest of the application. When opened, it traps the user's focus so that keyboard navigation will remain within the dialog until it is closed. It supports being closed by clicking outside the dialog content or pressing the ESC key.

• Source

Features:

• Manages tabindex, and role attributes for dialog accessibility.
• Manages aria-haspopup and aria-expanded attributes for toggle button accessibility.
• Maintains focus states to remain within the dialog for keyboard users.
• Adds event listener to close dialog on the esc key.
• Supports preventing page scroll while open.

Styled Example

NOTE:

Dialog background colors have been removed. The following styles have been added to this site to make the dialogs easier to see:

.color-black {
  color: #000;
}
.bg-white {
  background-color: #FFF;
}
.bg-black-alpha .vts-modal {
  background: rgba(0, 0, 0, 0.2);
}

Basic dialog

Using v-model

Add a close button

Prevent scrolling

With transitions

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, content: string }"