сделал js для modal

fitness
Kirill Pet 8 months ago
parent 9fc5e1cb5f
commit 6bf3962541
  1. 24
      assets/css/gp-style-desktop.css
  2. 12
      assets/css/gp-style-tablet.css
  3. 35
      assets/js/main.js
  4. 6
      index.html

@ -26,6 +26,11 @@
.text-3{
font-size: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1500px) {
.wrapper{
max-width: 100%;
}
}
/* text */
/* header */
@ -954,7 +959,9 @@
/* modal */
.modal__item{
width: 1000px;;
width: 1000px;
position: relative;
}
.modal__item > .title-1{
text-align: center;
@ -965,5 +972,20 @@
.modal__item > .form{
padding: 56px 36px 0 36px;
}
.modal-item__close{
position: absolute;
top: 40px;
right: 40px;
width: 24px;
aspect-ratio: 1;
background-image: url(/assets/img/icon/close.svg);
background-repeat: no-repeat;
background-position: center;
background-color: rgba(42, 42, 45, 0);
border: none;
}
/* modal */
@media only screen and (min-width: 992px) and (max-width: 1032px) {}

@ -751,5 +751,17 @@ main{
}
/* call */
/* modal */
.modal__item{
padding: 64px 16px;
}
.modal__item > .form{
padding: 40px 0 0 0;
}
.modal-item__close{
top: 20px;
right: 20px;
}
/* modal */
@media only screen and (max-width: 992px) {}

@ -216,6 +216,41 @@ btnOpenSearchPhone.onclick = function () {
// search end
// open-modal
let openModals = document.querySelectorAll('.open-modal'),
modal = document.querySelector('.modal');
openModals.forEach(openModal => {
let modalName = openModal.dataset.modal;
openModal.onclick = function () {
let modalItem = document.querySelector(`.modal__item.${modalName}`);
modalItem.classList.add('active');
modal.classList.add('active');
}
})
modal.onclick = function (event) {
if (event.srcElement.classList.contains('modal')) {
document.querySelector(`.modal__item.active`).classList.remove('active');
modal.classList.remove('active');
}
}
let itemModels = document.querySelectorAll('.modal__item');
itemModels.forEach(item => {
let btnClose = item.querySelector('.modal-item__close');
btnClose.onclick = function () {
item.classList.remove('active');
modal.classList.remove('active');
}
})
// open-modal end
// resize
window.addEventListener('resize', () => {
let screenWidth = window.screen.width;

@ -76,7 +76,7 @@
</a>
</div>
<div class="header-main__item">
<button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
<button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn open-modal" data-modal="modal-call">
Заказать звонок
</button>
<a href="" class="btn-big btn-big--blood header-main__btn">
@ -1093,6 +1093,8 @@
<div class="modal">
<div class="modal__item modal-project">
<button class="modal-item__close"></button>
<p class="title-1">
Получи проект бесплатно
</p>
@ -1147,6 +1149,8 @@
</div>
<div class="modal__item modal-call">
<button class="modal-item__close"></button>
<p class="title-1">
Обратный звонок
</p>

Loading…
Cancel
Save