PopupModalityMixin

Gives an overlay lightweight popup-style behavior

Overview

Purpose: makes an overlay behave like a popup by dismissing it when certain user interactions occur. This mixin is generally used in conjunction with OverlayMixin for basic overlay behavior.

This mixin works in the middle of the Elix render pipeline:

events → methodsmethods → setState → updates → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • Event handlers that close the element if the user clicks outside the element, presses the Esc key, moves the focus outside the element, scrolls the document, resizes the document, or switches focus away from the document.
  • A default ARIA role of alert.

Usage

import PopupModalityMixin from 'elix/src/PopupModalityMixin.js';
class MyElement extends PopupModalityMixin(HTMLElement) {}

Use PopupModalityMixin for lightweight overlays the user does not need to respond to, such as notifications, popup menus, and tooltips. The user can implicitly dismiss such popups by interacting elsewhere in the UI.

For modal overlays, use DialogModalityMixin instead. See the documentation of that mixin for a comparison of modality behaviors.

Example

Here's a popup.
Demo: This overlay's behavior comes from PopupModalityMixin

API

Used by classes Popup and Toast.

closeOnWindowResize property

True if the popup should close if the user resizes the window.

Type: boolean

Default: true