Overview
Purpose: blocks various user interactions to make an overlay behave like a modal dialog. This mixin is generally used in conjunction with OverlayMixin for basic overlay behavior, and a backdrop like ModalBackdrop for additional modality.
This mixin primarily works in the middle of the Elix render pipeline:
events → methods → setState ➞ render DOM → post-render
Expects the component to provide:
closemethod andclosedproperty, typically via OpenCloseMixin.keydownmethod for keyboard events, typically via KeyboardMixin.
Provides the component with:
- Disables scrolling on the background document. This is a global side-effect of opening the component.
- A default ARIA
roleofdialog. - Closes the element if user presses the Esc key.
Usage
import DialogModalityMixin from "elix/src/base/DialogModalityMixin.js";
class MyElement extends DialogModalityMixin(HTMLElement) {}
In general, use modal overlays with DialogModalityMixin only when it's critical that you gain the user's attention, or when you need them to provide a response in order to continue.
For all other overlay situations, consider making the overlay a popup with PopupModalityMixin instead.
Example
This paragraph has a z-index, but should appear behind the dialog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem scelerisque, blandit libero vitae, dapibus nisl. Sed turpis diam, placerat a feugiat sed, maximus at velit. Ut sit amet semper sapien. Donec vitae leo ex. Duis eget quam sed metus tempor lobortis eget feugiat elit. Cras varius, arcu ac commodo tincidunt, lectus dui convallis nunc, quis maximus nisl erat ac mi. Phasellus et velit diam.
API
Used by classes AlertDialog, Dialog, Drawer, DrawerWithGrip, PlainAlertDialog, PlainDialog, PlainDrawer, and PlainDrawerWithGrip.