Речь о функции, закрывающей модальное окно (поп-ап).
JS-файл генерирует контент из списка (объект). Может быть возникшая проблема связана с тем, что модальное окно, в функции закрытия которого (modalCloser) и возникла проблема, Не появляется в DOM-дереве сразу. Пытался делать проверку, на почему-то не срабатывает. Остановился на ниже приведённом, но функция закрывает поп-ап лишь единожды.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="dist/css/main.css">
<title>AbacPress</title>
</head>
<body>
<main>
<ul></ul>
</main>
<script src="src/js/main.js"></script>
</body>
</html>
Javascript:
//list of products
let products = new Object();
products = {
baden: {
title: "Диван Баден-Баден",
price: "20 000 рублей",
link: "src/img/baden-baden.jpg",
id: "baden"
},
dubay: {
title: "Диван Дубай",
price: "19 000 рублей",
link: "src/img/dubay.jpg",
id: "dubay"
},
lion: {
title: "Диван Лион",
price: "21 000 рублей",
link: "src/img/lion.jpg",
id: "lion"
},
stephani: {
title: "Диван Стефани",
price: "40 000 рублей",
link: "src/img/stephani.jpg",
id: "stephani"
}
}
// insert products into the page
for (key in products){
//console.log(key, products[key]);
document.querySelector('ul').insertAdjacentHTML('beforeend',
`<li>
<div class="item ${products[key]["id"]}">
<img src="${products[key]["link"]}" alt="" class="img">
<div class="description">
<h3 class="title">${products[key]["title"]}</h3>
<p class="price">${products[key]["price"]}</p>
</div>
<div class="buttons">
<button class="order" onclick="toOrder(this.parentElement.parentElement)">Заказать</button>
<button class="cart" onclick="toCart(this.parentElement.parentElement)">В корзину</button>
</div>
</div>
</li>`)
}
// making order
function toOrder(elem){
console.log(elem);
//console.log(elem.classList[1]);
elem.insertAdjacentHTML('beforeend',
`<div class="modal">
<div class="order-modal">
<button class="close-btn">+</button>
<h3 class="title">${elem.children[1].children[0].innerText}</h3>
<div class="container">
<div class="description">
<img src="${elem.children[0].currentSrc}" alt="" class="img">
<p class="price">${elem.children[1].children[1].innerText}</p>
</div>
<form action="">
<p><label for="order-form--comment">Комментарий к заказу:</label><input type="text" name="order-form-comment" id="order-form--comment"></p>
<p><label for="order-form--phone-number">Ваш телефон*:</label><input type="text" name="order-form--phone-number" id="order-form--phone-number"></p>
<button type="submit">Отправить</button>
</form>
</div></div>
</div>`);
modalCloser();
};
//adding to cart
//utilities:
// modal-close
function modalCloser(){
let closeBtn = document.querySelector(".close-btn");
let modal = document.querySelector(".modal");
closeBtn.addEventListener("click", function(){
modal.style.display = "none";
});
};
PS
Консоль ошибок не выдаёт
