Не открываются модальные окна по клику
 

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

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,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

код отформатирован

Albina_R,
а css?

Albina_R,
строка 66
??? точка вместо равно

Спасибо, ошибку исправила, теперь не видит карту: при клике по ссылке переход на страницу "Файл не найден" (имя файла, расширение соответствуют), если в стилях установить display: block; карта отображается. Также сохраняется проблема с модальным окном личного кабинета.
Вот css, как вы и просили:

.modal-map {
	top: 50%;
	left: 50%;
	
	display:none;

	width: 780px;
	height: 561px;
	margin-top: -280px;
	margin-left: -390px;

	border: 7px solid white;

}
.modal-map p {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;

	margin: 0;
}
.modal-map iframe {
	position: relative;
	z-index: 2;
    
	border: none;
}
.user-navigation .login-link {
	position: relative;
	padding-left: 50px;
	
}
.modal-login {
	top: 120px;
	left: 50%;

	display: none;

	margin-left: -230px;
	width: 300px;
	padding: 50px 80px;
}
.modal-close {
	position: absolute;
	top: 0;
	right: -34px;

	width: 22px;
	height: 22px;

	font-size: 0;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}
.modal {
	position: fixed;

	color: #000000;

	background-color: #f8f3f0;
	background-image: url("img.pattern-light.jpg");
	background-position: 0 0;
	background-repeat: repeat;
	box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
}
.modal-show {
	display: block;

	animation: bounce 0.6s;
}
.modal-error {
	animation: shake 0.6s;
}
@keyframes bounce {
	0% {
		transform: translateY(-2000px);
	}
	70% {
		transform: translateY(30px);
	}
	90% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}

Albina_R,
код ниже, если есть ещё вопросы, то лучше к специалистам по css

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.modal-map {
	top: 50%;
	left: 50%;
	width: 780px;
	height: 561px;
	margin-left: -390px;
	border: 7px solid white;

}
.modal-map p {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
}
.modal-map iframe {
	position: relative;
	z-index: 2;

	border: none;
}
.user-navigation .login-link {
	position: relative;
	padding-left: 50px;

}
.modal-login {
	top: 120px;
	left: 50%;
    position:    fixed;
	margin-left: -230px;
	width: 300px;
	padding: 50px 80px;
}
.modal-close {
    z-index: 100;
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	background-color: transparent;
	border: 0;
	cursor: pointer;
    color: transparent;
}
.modal-close:before{
    content: "X";
    color: #000000;
 }

body{
  position: relative;
}

.modal {
    position: absolute;
    display: none;
	color: #000000;
 	background-color: #f8f3f0;
	background-image: url("img.pattern-light.jpg");
	background-position: 0 0;
	background-repeat: repeat;
	box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
}
.modal-show {
	display: block;
	animation: bounce 0.6s;
    z-index: 1000;
}
.modal-error {
	animation: shake 0.6s;
}
@keyframes bounce {
	0% {
		transform: translateY(-2000px);
	}
	70% {
		transform: translateY(30px);
	}
	90% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(10px);
	}
}

  </style>
</head>

<body>
<ul class="user-navigation">
						<li>
							<a class="login-link" href="login.html">Вход</a>
						</li>
                        <li>
							<a class="contacts-button-map" href="#">Контакты</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>
<script>
                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=mapPopup.querySelector(".modal-close");
				mapLink.addEventListener("click",function(evt) {
					evt.preventDefault();
					mapPopup.classList.add("modal-show");
				});

				mapClose.addEventListener("click",function(evt) {
					evt.preventDefault();
					mapPopup.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");
						}
					}
				}

					);

</script>
</body>
</html>

спасибо, то есть проблема в css?

в чём у вас проблема сейчас, не знаю, что мог я исправил и в js и css.

спасибо вам большое!!!