Gives an overlay modal behavior


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 → setStaterender DOM → post-render

Expects the component to provide:

Provides the component with:

  • Disables scrolling on the background document. This is a global side-effect of opening the component.
  • A default ARIA role of dialog.
  • Closes the element if user presses the Esc key.


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.


Here's a dialog.

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.

Demo: This dialog's behavior comes from DialogModalityMixin and ModalBackdrop