07.07.2018, 16:25
|
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
07.07.2018, 16:35
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Albina_R,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
07.07.2018, 16:42
|
|
Новичок на форуме
|
|
Регистрация: 07.07.2018
Сообщений: 5
|
|
|
код отформатирован
|
|
07.07.2018, 17:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Albina_R,
а css?
|
|
07.07.2018, 17:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Albina_R,
строка 66
|
Сообщение от Albina_R
|
|
mapClose=addEventListener
|
??? точка вместо равно
|
|
07.07.2018, 18:32
|
|
Новичок на форуме
|
|
Регистрация: 07.07.2018
Сообщений: 5
|
|
Спасибо, ошибку исправила, теперь не видит карту: при клике по ссылке переход на страницу "Файл не найден" (имя файла, расширение соответствуют), если в стилях установить 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);
}
}
|
|
07.07.2018, 19:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
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>
|
|
07.07.2018, 20:55
|
|
Новичок на форуме
|
|
Регистрация: 07.07.2018
Сообщений: 5
|
|
|
спасибо, то есть проблема в css?
|
|
07.07.2018, 21:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от Albina_R
|
|
то есть проблема в css?
|
в чём у вас проблема сейчас, не знаю, что мог я исправил и в js и css. |
|
08.07.2018, 14:46
|
|
Новичок на форуме
|
|
Регистрация: 07.07.2018
Сообщений: 5
|
|
|
спасибо вам большое!!!
|
|
|
|
