Открытие popup происходит хорошо, но когда я нажимаю на содержимое popup например на один из input то он сразу закрывается, как я это могу решить?
const openButtonProduct = document.querySelectorAll('.cart-item__edit');
if(openButtonProduct) {
const closeButtonProduct = document.querySelector('.cart-popup__close');
const popupProduct = document.querySelector('.cart-popup');
const overlay = document.querySelector('.overlay')
overlay.addEventListener('click', () => {
popupProduct.classList.add('hidden')
})
openButtonProduct.forEach(function(button) {
button.addEventListener('click', () => {
popupProduct.classList.remove('hidden')
});
closeButtonProduct.addEventListener('click', function() {
popupProduct.classList.add('hidden')
});
});
}
cart-popup {
display: flex;
&__wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
z-index: 92;
}
&__left {
display: flex;
align-items: flex-start;
gap: 10px;
}
&__body {
position: relative;
display: flex;
gap: 20px;
padding: 40px;
background: #FFFFFF;
box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.1);
border-radius: 50px;
}
&__close {
position: absolute;
top: -60px;
right: 0;
}
&__img {
width: 240px;
height: 268px;
display: flex;
justify-content: center;
background: #E4E4E5;
border-radius: 22px;
margin-bottom: 15px;
}
&__price-now {
display: flex;
margin-top: 15px;
}
&__heading {
display: flex;
align-items: center;
font-weight: 600;
font-size: 18px;
gap: 3px;
h4 {
margin-bottom: 4px;
}
}
&__textarea {
width: 300px;
padding: 10px 20px 10px 15px;
background: #E8E8E8;
border-radius: 15px;
font-weight: 500;
font-size: 12px;
color: #6A6A6A;
line-height: 15px;
height: 65px;
overflow: hidden;
}
&__input {
width: 300px;
}
&__buttons {
display: flex;
gap: 10px;
margin-top: 15px;
}
&__cancel {
padding: 15px 40px;
font-weight: 600;
color: #6A6A6A;
background: #E8E8E8;
border-radius: 15px;
}
&__save {
padding: 15px 27px;
}
&__col {
display: flex;
flex-direction: column;
gap: 15px;
}
&__col--left {
gap: 30px;
}
&__help {
margin-top: 4px;
font-size: 10px;
text-decoration: underline;
text-decoration-color: #c30101;
}
&__form {
display: flex;
gap: 40px;
margin-top: 12px;
}
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
z-index: 88;
}
<div class="cart-popup hidden">
<div class="overlay">
<div class="cart-popup__wrapper">
<div class="cart-popup__body">
<div class="cart-popup__left">
<button class="cart-popup__edit"><img src="/images/cart/edit.svg" alt=""></button>
<div class="cart-popup__image">
<div class="cart-popup__product">
<div class="cart-popup__img">
<img src="/images/cart/vtb.png" alt="">
</div>
<div class="price">
<div class="price__now cart-popup__price-now">
<p>от 417.00 BYN</p>
<div class="product__question--red" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
<img src="/images/icons/red-qustion.svg" alt="question">
</div>
</div>
<div class="price__sale">
<p class="price__cost">от 507.00 BYN</p>
<p class="price__percent">-18%</p>
<div class="product__time" data-qustion="До конца акции 5 дней, 5 часов и 5 минут!">
<img src="/images/cart/sale.svg" alt="sale">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cart-popup__right">
<a class="title" href="/product.html">НАЗВАНИЕ ПРОДУКТА<img src="/images/icons/link-icon.svg" alt=""></a>
<form action="" class="cart-popup__form">
<div class="cart-popup__col">
<div class="cart-popup__group">
<div class="product__title">
<p>Ваши пожелания</p>
<div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
<img src="/images/product/question.svg" alt="question">
</div>
</div>
<textarea name="" id="" class="cart-popup__textarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</textarea>
<div class="cart-popup__help red-text"><a href="/text-example.html">Нету текста для награды?</a></div>
</div>
<div class="cart-popup__group">
<div class="product__title">
<p>Ориентировочные размеры</p>
<div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
<img src="/images/product/question.svg" alt="question">
</div>
</div>
<input type="text" class="input-text cart-popup__input" value="300*500*100 мм">
</div>
<div class="cart-popup__group">
<div class="product__title">
<p>Дополнительные опции</p>
<div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
<img src="/images/product/question.svg" alt="question">
</div>
</div>
<select class="select">
<option selected>Выберите</option>
<option>Cappuccino</option>
<option>Espresso</option>
<option>Latte</option>
<option>Mocha</option>
<option>Frappe</option>
</select>
</div>
<div class="cart-popup__buttons">
<button class="cart-popup__save red-btn">Сохранить</button>
<button class="cart-popup__cancel">Отмена</button>
</div>
</div>
<div class="cart-popup__col cart-popup__col--left">
<div class="cart-popup__group">
<div class="product__title">
<p>Крайний срок готовности</p>
<div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
<img src="/images/product/question.svg" alt="question">
</div>
</div>
<input type="date">
</div>
<div class="cart-popup__group">
<div class="cart-popup__heading">
<h4>Количествои</h4>
</div>
<div class="counter">
<div class="counter__wrapper">
<button class="counter__btn--plus" onclick="stepper(this)"><img src="/images/cart/minus.svg" alt="minus"></button>
<input type="number" min="1" max="100" step="1" value="1" class="counter__input">
<button class="counter__btn--minus" onclick="stepper(this)"><img src="/images/cart/plus.svg" alt="plus"></button>
</div>
</div>
</div>
</div>
</form>
</div>
<button class="cart-popup__close"><img src="/images/cart/close.svg" alt="close"></button>
</div>
<div class="question-tooltip">
</div>
<div class="tooltip--time"></div>
<div class="question-tooltip--red"></div>
</div>
</div>
</div>