import $ from 'jquery';

class ModalUI {
  constructor($node, options) {
    this.options = $.extend({}, {
      target: options.container || 'body',
    }, options);

    this.$modal = $node;
    this.$backdrop = $('<div class="note-modal-backdrop"/>');
  }

  show() {
    if (this.options.target === 'body') {
      this.$backdrop.css('position', 'fixed');
      this.$modal.css('position', 'fixed');
    } else {
      this.$backdrop.css('position', 'absolute');
      this.$modal.css('position', 'absolute');
    }

    this.$backdrop.appendTo(this.options.target).show();
    this.$modal.appendTo(this.options.target).addClass('open').show();

    this.$modal.trigger('note.modal.show');
    this.$modal.off('click', '.close').on('click', '.close', this.hide.bind(this));
  }

  hide() {
    this.$modal.removeClass('open').hide();
    this.$backdrop.hide();
    this.$modal.trigger('note.modal.hide');
  }
}

export default ModalUI;

import $ from 'jquery';

class ModalUI {
  constructor($node, options) {
    this.options = $.extend({}, {
      target: options.container || 'body',
    }, options);

    this.$modal = $node;
    this.$backdrop = $('<div class="note-modal-backdrop"/>');
  }

  show() {
    if (this.options.target === 'body') {
      this.$backdrop.css('position', 'fixed');
      this.$modal.css('position', 'fixed');
    } else {
      this.$backdrop.css('position', 'absolute');
      this.$modal.css('position', 'absolute');
    }

    this.$backdrop.appendTo(this.options.target).show();
    this.$modal.appendTo(this.options.target).addClass('open').show();

    this.$modal.trigger('note.modal.show');
    this.$modal.off('click', '.close').on('click', '.close', this.hide.bind(this));
    this.$modal.on('keydown', (event) => {
      if (event.which === 27) {
        event.preventDefault();
        this.hide();
      }
    });
  }

  hide() {
    this.$modal.removeClass('open').hide();
    this.$backdrop.hide();
    this.$modal.trigger('note.modal.hide');
    this.$modal.off('keydown');
  }
}

export default ModalUI;

Add closing lite dialog by pressing esc key
Add closing lite dialog by pressing esc key
