Доброго времени суток! Появилась проблема всплытия события. Т.е. по клику на оборачивающий блок fixed-wrap должно закрываться модальное окно modal. Сейчас modal закрывается куда бы я не кликнул.
Ко всему прочему паттрен отрабатывает только со второго клика, судя по всему в каком-то месте по первому клику я только подписываюсь на событие, а по второму обрабатываю. Пока до конца не разобрался, но есть предположение что происходит это в приватной функции _initModal.
Возникли трудности т.к. в данном примере используется паттерн Модуль и нет ясности в каком месте и какой метод использовать для остановки распространения события по DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
</head>
<body>
<div class="fixed-wrap fixed-wrap__modal">
<div class="modal">
<div class="modal-container">
<div class="move-container"></div>
<input class="modal__input" type="text" placeholder="Введите название цели">
</div>
</div>
</div>
<button class="tasks__btn" type="submit">+ добавить задачу</button>
<style>
.fixed-wrap {
display: block;
position: fixed;
overflow: auto;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
opacity: 0;
visibility: hidden;
transition: 1000ms;
}
.fixed-wrap._show {
opacity: 1;
visibility: visible;
}
.fixed-wrap__modal {
text-align: center;
white-space: nowrap;
}
.fixed-wrap__modal::after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.modal {
display: inline-block;
vertical-align: middle;
}
.modal-container {
background-color: #fff;
padding: 20px;
color: #000;
height: 500px;
width: 710px;
text-align: left;
white-space: normal;
}
.move-container {
width: 100%;
height: 53px;
}
.modal__input {
display: block;
width: 80%;
min-height: 40px;
padding: 12px;
margin: 0 auto 20px;
font: 16px "Roboto-Regular", sans-serif;
border: 1px solid #acadaf;
box-sizing: border-box;
outline: none;
}
</style>
<script>
var modalBtn = document.querySelector(".tasks__btn");
var modalOverlay = document.querySelector(".fixed-wrap");
var modalWnd = (function() {
var _init = function() {
_eventListener();
_initModal();
_closeModal();
};
var _eventListener = function() {
modalBtn.addEventListener("click", _initModal, false);
};
var _initModal = function() {
var modal = document.querySelector(".fixed-wrap");
modal.classList.add("_show");
};
var _closeModal = function() {
var modal = document.querySelector(".fixed-wrap");
modal.classList.remove("_show");
}
return {
init: _init,
close: _closeModal
};
})();
modalBtn.onclick = function() {
modalWnd.init();
};
modalOverlay.onclick = function() {
modalWnd.close();
};
/*
var modalBtn = document.querySelector(".tasks__btn");
var modalOverlay = document.querySelector(".fixed-wrap");
var handlerInit = function() {
modalWnd.init();
};
var handlerClose = function() {
modalWnd.close();
};
var modalWnd = (function() {
var _init = function() {
_eventListener();
_initModal();
_closeModal();
};
var _eventListener = function() {
modalBtn.addEventListener("click", _initModal);
};
var _initModal = function() {
var modal = document.querySelector(".fixed-wrap");
modal.classList.add("_show");
};
var _closeModal = function() {
var modal = document.querySelector(".fixed-wrap");
modal.classList.remove("_show");
}
return {
init: _init,
close: _closeModal
};
})();
modalOverlay.addEventListener("click", handlerInit, false);
modalBtn.addEventListener("click", handlerClose, false);
*/
</script>
</body>
</html>
Буду благодарен за обратную связь, спасибо
