Javascript-форум - Проблема всплытия, паттерн Модуль

Доброго времени суток! Появилась проблема всплытия события. Т.е. по клику на оборачивающий блок 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>

Буду благодарен за обратную связь, спасибо :)