diff --git a/src/app.html b/src/app.html
index 3662119..02eec38 100644
--- a/src/app.html
+++ b/src/app.html
@@ -9,18 +9,12 @@
-
+
+
+
+
+
+
-
-
- |
+
+
+ |
-
-
+
+
- |
+ |
-
-
+
+
@@ -100,7 +120,7 @@
diff --git a/src/components/modal/Modal.css b/src/components/modal/Modal.css
new file mode 100644
index 0000000..72c1128
--- /dev/null
+++ b/src/components/modal/Modal.css
@@ -0,0 +1,17 @@
+.Modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.Modal__window {
+ display: block;
+}
+
+.Modal_show {
+ display: block;
+}
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
new file mode 100644
index 0000000..a65f9e1
--- /dev/null
+++ b/src/components/modal/Modal.js
@@ -0,0 +1,88 @@
+import Component from '../component/index';
+
+import './Modal.css';
+
+const EVENTS = {
+ TOGGLE: 'toggle',
+ CLICK: 'mousedown'
+};
+
+const TEMPLATE = '#universal-modal';
+const MODAL = '.modal';
+const MODAL_SHOW = 'Modal_show';
+const CLOSE_BUTTON = '.close';
+const MODAL_HEADER = '.modal-title';
+const MODAL_CONTENT = '.modal-body';
+const MODAL_FOOTER = '.modal-footer';
+
+/**
+ * @function ModalListener
+ * @param {boolean} isOpen - принимает первым параметром новое состояние модалки
+ */
+
+/**
+ * Класс для создания модальных окон
+ * @param {Node} parentNode - родительский Node, в который следует положить модалку
+ * @param {{headerNode: Node; contentNode: Node; footerNode: Node}} options - Опции для размещения компонентов внутри модалки
+ */
+class Modal extends Component {
+ constructor (parentNode, {
+ headerNode,
+ contentNode,
+ footerNode,
+ } = {}) {
+ super(TEMPLATE, parentNode);
+
+ this.modal = this.mainNode.querySelector(MODAL);
+ this.closeButton = this.mainNode.querySelector(CLOSE_BUTTON);
+ this.header = this.mainNode.querySelector(MODAL_HEADER);
+ this.content = this.mainNode.querySelector(MODAL_CONTENT);
+ this.footer = this.mainNode.querySelector(MODAL_FOOTER);
+
+ if (headerNode) {
+ this.header.appendChild(headerNode);
+ }
+
+ if (contentNode) {
+ this.content.appendChild(contentNode);
+ }
+
+ if (footerNode) {
+ this.footer.appendChild(footerNode);
+ }
+
+ this.addEventListener(this.modal, EVENTS.CLICK, (event) => {
+ if (event.target === this.modal) {
+ this.hide();
+ }
+ });
+ this.addEventListener(this.closeButton, EVENTS.CLICK, this.hide);
+ }
+
+ /**
+ * Показывает модальное окно
+ */
+ show = () => {
+ this.mainNode.classList.add(MODAL_SHOW);
+ this.next(EVENTS.TOGGLE, true);
+ }
+
+ /**
+ * Прячет модальное окно
+ */
+ hide = () => {
+ this.mainNode.classList.remove(MODAL_SHOW);
+ this.next(EVENTS.TOGGLE, false);
+ }
+
+ /**
+ * Метод для подписки на изменение состояний модалки
+ * @param {ModalListener} listener - коллбек
+ */
+ onChangeShow = (listener) => {
+ this.subscribe(EVENTS.TOGGLE, listener);
+ }
+
+}
+
+export default Modal;
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
new file mode 100644
index 0000000..8144af5
--- /dev/null
+++ b/src/components/modal/index.js
@@ -0,0 +1,3 @@
+import Modal from './Modal';
+
+export default Modal;
diff --git a/src/services/EmitService.js b/src/services/EmitService.js
index ecab102..8032bb2 100644
--- a/src/services/EmitService.js
+++ b/src/services/EmitService.js
@@ -40,7 +40,7 @@ class EmitService {
* _.next('click', arg1, arg2, ..., argN);
*/
next = (eventName, ...args) => {
- const listeners = this._events[eventName];
+ const listeners = this._events[eventName] || [];
listeners.forEach((listener) => {
listener(...args);
});