Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2017, 19:12
Аспирант
Отправить личное сообщение для phoenix200689 Посмотреть профиль Найти все сообщения от phoenix200689
 
Регистрация: 02.11.2016
Сообщений: 31

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


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

Последний раз редактировалось phoenix200689, 24.02.2017 в 20:06. Причина: пример дополнен
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2017, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

phoenix200689,
делали бы пример полностью
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2017, 20:09
Аспирант
Отправить личное сообщение для phoenix200689 Посмотреть профиль Найти все сообщения от phoenix200689
 
Регистрация: 02.11.2016
Сообщений: 31

Дополнил.

p.s. код в комментариях это попытка перейти с onclick на eventListeners.
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2017, 20:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,811

phoenix200689,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .fixed-wrap{
    position: fixed;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     background-color: #DCDCDC;
      display: none;
  }
  .fixed-wrap._show{
    display: block;
  }
  .modal{
  background: #fff;
 width: 520px;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border: 10px solid #ddd;
 position: relative;
 /*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
 /*--CSS3 Скругленные углы--*/
-webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
}



  </style>

</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>

<input class="tasks__btn" type="button" value="go">
<script>

var modalWnd = (function() {

    var _init = function() {
      _eventListener();
    };
    var modal = document.querySelector(".modal");
    var modalBtn = document.querySelector(".tasks__btn");
    var modalOverlay = document.querySelector(".fixed-wrap");
    var _eventListener = function() {
      modalBtn.addEventListener("click", _initModal, false);
      modalOverlay.addEventListener("click", _closeModal, false);
      modal.addEventListener("click", function(event) {
      event.stopPropagation()
}, false);
    };

    var _initModal = function() {
      modalOverlay.classList.add("_show");
    };

    var _closeModal = function() {
      modalOverlay.classList.remove("_show");
    }


  return {
    init: _init,
    close: _closeModal,
    show : _initModal
  };
})();

modalWnd.init();
modalWnd.show()


</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2017, 20:43
Аспирант
Отправить личное сообщение для phoenix200689 Посмотреть профиль Найти все сообщения от phoenix200689
 
Регистрация: 02.11.2016
Сообщений: 31

Это работает, спасибо Ушел разбираться как оно работает и что я делал не так
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 08:30
Проблема: Остановка всплытия событий (Firefox) abc_ua Events/DOM/Window 4 09.03.2011 01:28
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 16:07
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31
Проблема спама lliberty AJAX и COMET 1 12.03.2009 15:47