Барбершоп "Бородинский"

Интенсивы
1

Ребята, помогите с кодом для модальных окошек к барбершопу, вроде все проверила, а не идет, кликаю на ссылку и ничего не происходит. Вот код джава скрипт:

			var link = document.querySelector(".login-link");

			var popup = document.querySelector(".modal-login");
			var close = popup.querySelector(".modal-close");

			var form = popup.querySelector("form");
			var login = popup.querySelector("[name=login]");
			var password = popup.querySelector("[name=password]");

			var isStorageSupport = true;
			var storage = "";

			try {
				storage = localStorage.getItem("login");
			} catch (err) {
				isStorageSupport = false;
			}

			link.addEventListener("click", function(evt) {
				evt.preventDefault();
				popup.classList.add("modal-show");

				if (storage) {
					login.value = storage;
					password.focus();
				} else { 
					login.focus();
				}
			});
			close.addEventListener("click", function(evt) {
				evt.preventDefault();
				popup.classList.remove("modal-show");
				popup.classList.remove("modal-error");
			});
			form.addEventListener("submit", function(evt) {
				if (!login.value || !password.value) {
				evt.preventDefault();
				popup.classList.remove("modal-error");
				popup.offsetWidth = popup.offsetWidth;
				popup.classList.add("modal-error");
				
			} else {
				if (isStorageSupport) {
				localStorage.setItem("login", login.value);
			}
		    }
			});
			window.addEventListener("keydown", function(evt) {
				if(evt.keyCode ===27) {
					evt.preventDefault();
					if(popup.classList.contains("modal-show")) {
						popup.classList.remove("modal-show");
						popup.classList.remove("modal-error");
					}
				}
			});
		
			var mapLink=document.querySelector(".contacts-button-map");

			var mapPopup=document.querySelector(".modal-map");
			var mapClose=document.querySelector(".modal-close");
			mapLink=addEventListener("click",function(evt) {
				evt.preventDefault();
				mapPopup.classList.add("modal-show");
			});
			mapClose=addEventListener("click",function(evt) {
				evt.preventDefault();
				mapClose.classList.remove("modal-show");
			});
			window.addEventListener("keydown",function(evt){
				if (evt.keyCode===27) {
					evt.preventDefault();
					if (mapPopup.classList.contains("modal-show")) {
						mapPopup.classList.remove("modal-show");
					} 
				}
			}

				);
2

html-код тоже нужен. Оформите код в песочнице, пожалуйста. http://jsfiddle.net/ или https://codepen.io/

6

Оформила код, как вы и просили, здесь разметка, стили, js https://codepen.io/anon/pen/OEKomZ

7

У вас правило .modal-show {} идет раньше чем .modal-login {}, поэтому смены display: none; на display: block; не происходит.

8

спасибо вам большое, вы оказались правы!еще осталась проблема с картой, подскажите, пожалуйста, а то глаз уже замылился, не могу найти причину проблемы.

9

Проблема та же. Правило с селектором .modal-show {} идет раньше .modal-map {}.

10

спасибо, получилось, осталась одна проблема с закрытием карты, посмотрите пожалуйста, еще эту ошибку.

11

Попытаюсь объяснить, в чем дело. У вас на странице два всплывающих окна, и в каждом из них есть кнопка “Закрыть”.
Вы пишете:
var mapClose=document.querySelector(".modal-close");
document.querySelector здесь выбирает первый найденный элемент подходящий под заданный селектор. И это кнопка “Закрыть” в окне с формой входа, а не с картой. Потому и не работает. Также есть ошибка в строке:

Класс modal-show убирается с всплывающего окна, а не с кнопки “Закрыть”.
И еще опечатка:

Должна быть точка вместо =

P.S. На интенсиве у каждого должен быть наставник. Он не помогает вам?

12

спасибо вам еще раз, учла ошибки и исправила, странно, но после того как поменяла порядок section с модальными окнами в разметке, заработали обе кнопки “закрыть”,я обучаюсь без наставника.