Показать сообщение отдельно
  #1 (permalink)  
Старый 07.07.2018, 16:25
Новичок на форуме
Отправить личное сообщение для Albina_R Посмотреть профиль Найти все сообщения от Albina_R
 
Регистрация: 07.07.2018
Сообщений: 5

Не открываются модальные окна по клику
Ребята, помогите с кодом для модальных окошек, вроде все проверила, а не идет, кликаю на ссылку и ничего не происходит. Вот код:
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");
						} 
					}
				}

					);


Вот разметка:
<ul class="user-navigation">
						<li>
							<a class="login-link" href="login.html">Вход</a>
						</li>
					</ul>....
				<section class="modal modal-login">
					<h2>Личный кабинет</h2>
					<p class="modal-description">Введите пожалуйста свой логин и пароль</p>
						<form class="login-form" action="https://echo.htmlacademy.ru" method="post">
							<p>
								<label class="visually-hidden" for="user-login">Логин</label>
								<input class="login-icon-user" id="user-login" type="text" name="login" placeholder="Логин">
							</p>
								<p>
								<label class="visually-hidden" for="user-password">Пароль</label>
								<input class="login-icon-password" id="user-password" type="password" name="password" placeholder="Пароль">
							</p>
								<p class="login-help">
								<label class="login-checkbox">
									<input type="checkbox" name="remember" class="visually-hidden">
									<span class="checkbox-indicator"></span>
									Запомните меня 
									
								</label>
								<a class="restore" href="#"> Я забыл пароль!</a>
							</p>
							<button type="submit" class="button">Войти</button>
						</form>
						<button class="modal-close" type="button">Закрыть</button>		
				</section>
				<section class="modal modal-map">
					<h2 class="visually-hidden">Как до нас добраться</h2>
					<iframe src="https://www.google.com/maps/embed?pb" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
					<p>
						<img src="img/map.png" width="780" height="560" alt="Офис компании по адресу ул.Большая Конюшенная 19/8, Санкт-Петербург">
					</p>
					<button class="modal-close" type="button">Закрыть</button>
			</section>

Последний раз редактировалось Albina_R, 07.07.2018 в 16:41.
Ответить с цитированием