JS - >>>>>>
const modalTrigger = document.querySelectorAll("[data-modal]"),
modal = document.querySelector(".modal");
function closeModal() {
modal.classList.remove("show");
modal.classList.add("hide");
document.body.style.overflow = "";
}
function openModal() {
modal.classList.remove("hide");
modal.classList.add("show");
document.body.style.overflow = "hidden";
clearInterval(modalTimerId);
}
modalTrigger.forEach(function (btn) {
btn.addEventListener("click", function () {
openModal();
});
});
HTML ->>>>>>>>>
<div class="modal">
<div class="modal__dialog">
<div class="modal__content">
<form action="#">
<div data-close class="modal__close">×</div>
<div class="modal__title">
Мы свяжемся с вами как можно быстрее!
</div>
<input
required
placeholder="Ваше имя"
name="name"
type="text"
class="modal__input"
/>
<input
required
placeholder="Ваш номер телефона"
name="phone"
type="phone"
class="modal__input"
/>
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
</div>
У меня просто исчезает боковой скролл, так как оверфлоу применился при клике на кнопку, но сама панель не появляется. Я был вынуженден применить до этого просто style.display="block", но теперь это вылезло боком в коде
modal
заданdisplay:none
и он «побеждает» классshow
(возможно просто потому что идёт в коде ниже) css-live.ru/css/nikto-ne-znaet-css-specifichnost-ne-kaskad.html