How to use ember-modal-dialog - 5 common examples

// BEGIN-SNIPPET subclass
import Component from 'ember-modal-dialog/components/modal-dialog';

export default Component.extend({
  translucentOverlay: true, // override default of false
  containerClassNames: 'my-cool-modal',
  destinationElementId: 'modal-overlays'
});
// END-SNIPPET

import ModalDialog from 'ember-modal-dialog/components/modal-dialog';
import { on } from '@ember/object/evented';
import $ from 'jquery';

export default ModalDialog.extend({

  setup: on('didInsertElement', function() {
    $('body').on('keyup.modal-dialog', (e) => {
      if (e.keyCode === 27) {
        this.sendAction('onClose'); // eslint-disable-line ember/closure-actions
      }
    });
  }),

  teardown: on('willDestroyElement', function() {
    $('body').off('keyup.modal-dialog');
  })

});

import { on } from '@ember/object/evented';
import { set } from '@ember/object';
import ModalDialog from 'ember-modal-dialog/components/modal-dialog';
import {
  EKMixin as EmberKeyboardMixin,
  keyDown
} from 'ember-keyboard';

export default ModalDialog.extend(EmberKeyboardMixin, {
  init() {
    this._super(...arguments);

    set(this, 'keyboardActivated', true);
  },

  closeOnEsc: on(keyDown('Escape'), function() {
    this.sendAction('close');
  })
});

import { inject as service } from '@ember/service';
import ModalDialog from 'ember-modal-dialog/components/modal-dialog';

const containerClassNames = ['md-spotlight-modal'];
const overlayClassNames = ['md-modal-overlay'];

export default ModalDialog.extend({
  /**
   * Component that highlights a DOM element
   *
   * @class md-spotlight
   * @module mdeditor
   * @submodule components-control
   * @extends modal-dialog
   * @uses service-spotlight
   * @constructor
   */

  /**
   * The inected spotlight Service
   *
   * @property spotlight
   * @type {Service}

import Dialog from 'ember-modal-dialog/components/modal-dialog';
import { get } from '@ember/object';
import { action } from '@ember-decorators/object';

/**
 * The default value for content when component is rendered inline
 * @type {string}
 */
const defaultInlineContent = '';
const containerClassNames = ['notification-confirm-modal'];

export default class NotificationsDialogConfirmDialog extends Dialog.extend({
  content: defaultInlineContent,

  overlayClass: 'notification-overlay',

  containerClassNames
}) {
  /**
   * Handles the onClose external action
   */
  @action
  onClose() {
    get(this, 'onClose')();
  }

  /**
   * Handles the onConfirm external action