Modal
SfModal creates a modal window that opens on top of the main window. This component can be used to display important information that requires user interaction.
In addition to the UI aspect, SfModal adds additional functionality that implements several best practices:
- Traps focus within the modal using the
useTrapFocusfunction - Allows the user to close the modal by pressing the
Escapekey. - Allows the user to close the modal by clicking outside of it.
The closing behavior can be disabled by setting the disableClickAway/disableEsc prop to true.
Examples
Basic usage
The visibility of the modal is controlled by v-model.
This example also uses the useDisclosure function to provide nice controls for handling the modal's visibility.
Animated
You can make smooth transitions when the modal pops up.
Accessibility notes
SfModal sets the aria-modal="true" attribute. Also, it sets the tabindex to -1 so Tab and Shift + Tab do not move focus outside the modal.
Since you may need to use this component in different contexts, there is no role attribute set by default. Make sure to add proper role based on your needs:
role="alertdialog"for dialogs where immediate user response is required. See details.role="dialog"for generic dialogs. See details.
You should add aria-labelledby or aria-label attributes to provide an accessible label for your modal - usually this value can be the title of the modal. To add more context, you should use the aria-describedby or aria-description attributes.
Both techniques can be seen in the code examples above.