@zestia/ember-modal-dialog

This addon provides a simple Modal Dialog component.

There are two versions 4x and 5x.

Version 5 uses the native dialog, and version 4 does not. Version 4 is still being maintained because support for native dialog is not great, and there are still some quirks.

Installation

ember install @zestia/ember-modal-dialog

Add the following to ~/.npmrc to pull @zestia scoped packages from Github instead of NPM.

@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<YOUR_GH_TOKEN>

Demo

https://zestia.github.io/ember-modal-dialog

Features

• Uses native dialog ✔︎
• Focus trap ✔︎
• Body scroll lock ✔︎
• Loading state handling ✔︎
• Optionally escapable ✔︎
• Animatable (remains in the DOM until animated out) ✔︎
• Simple API ✔︎

Notes

• This addon intentionally does not come with any styles.
• It is configured with ember-test-waiters so awaiting in your test suite will just work.
• Animating a modal dialog out is not possible. Although you can achieve it with transitions. (see demo)
• Support for @starting-style is not great
• Native scroll lock only works on the body element (see demo)

Example

<ModalDialog @onClose={{@onClose}} as |modal|>
  Content

  <button {{on 'click' modal.close}}>
    Close
  </button>
</ModalDialog>

{{! application.gjs }}
{{#if this.showMyModal}}
  <MyModal @onClose={{this.hideMyModal}} />
{{/if}}

ModalDialog

Arguments

@onReady

Optional. This action receives the API as a parameter, for full control over a modal dialog.

@onLoad

Optional. Fired when a modal is constructed and allows you to return a promise for any data that is required before the modal can display.

@onLoaded

Optional. Fired after the request to load data was successful. Receives the result as a parameter.

@onLoadError

Optional. Fired when the request to load data fails. Receives the error as a parameter.

@onClose

Required. This action fires when close has been called, and any animations have run to hide the modal dialog.

API

close

Call this when you want to close the modal. It will first wait for any animations on the DOM element, and then @onClose will be fired. Allowing you to physically remove the modal from the DOM.

isLoading

Whether the data required for the modal dialog to display is loading.