сделал js для modal
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user