This addon provides a simple Modal Dialog component.

ember install @zestia/ember-modal-dialog

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

• Focus trap ✔︎
• Body scroll lock ✔︎
• Loading state handling ✔︎
• Optionally escapable ✔︎
• Exceeds viewport detection ✔︎
• Animatable (includes test waiters) ✔︎
• Simple API ✔︎

• 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.
• Does not use native dialog yet, because:
  • Can't animate ::backdrop
  • Can't use ::backdrop with CSS variables
  • Does not provide a focus trap
  • Does not provide a scroll lock

The modal dialog component isn't designed to be used on its own, but rather used to compose a new modal dialog component... in this example it's called "my-modal"

{{! my-modal.hbs }}
<ModalDialog @onClose={{@onClose}} as |modal|>
  Content

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

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

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

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.

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

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

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

Optional. Fired when escape is pressed or the user clicks outside the dialog box. You can use the API to call close for example.

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.

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

The DOM element of the modal dialog component.

The inner DOM element of the modal dialog component, that contains the content.