Привет всем!
Я настроил модалку, задал ей прокрутку, при нажатии на кнопку модалки в body убирается overflow, но он всё равно прокручивается. У меня получается так, что пытаясь прокручивать модалку у меня прокручивается body. Такой лаг присуствует только в сафари, в других браузерах такого нет. Как это убрать? Вот JS код:
//First modal
var btn_first = document.querySelector('.modal-first-button'),
modal_first = document.querySelector('.modal-first'),
closeBtn_first = document.querySelector('.closeBtn-first');
body = document.querySelector('body')
btn_first.addEventListener('click', function() {
modal_first.style.display = 'flex';
body.style.overflow = 'hidden';
})
closeBtn_first.addEventListener('click', function () {
modal_first.style.display = "none";
body.style.overflow = 'scroll';
})
window.addEventListener('click', function (e) {
if(e.target == modal_first) {
modal_first.style.display = "none";
body.style.overflow = 'scroll';
}
})
//Second modal
var btn_second = document.querySelector('.modal-second-button'),
modal_second = document.querySelector('.modal-second'),
closeBtn_second = document.querySelector('.closeBtn-second');
btn_second.addEventListener('click', function() {
modal_second.style.display = 'flex';
body.style.overflow = 'hidden';
})
closeBtn_second.addEventListener('click', function () {
modal_second.style.display = "none";
body.style.overflow = 'scroll';
})
window.addEventListener('click', function (e) {
if(e.target == modal_second) {
modal_second.style.display = "none";
body.style.overflow = 'scroll';
}
})
//Third modal
var btn_third = document.querySelector('.modal-third-button'),
modal_third = document.querySelector('.modal-third'),
closeBtn_third = document.querySelector('.closeBtn-third');
btn_third.addEventListener('click', function() {
modal_third.style.display = 'flex';
body.style.overflow = 'hidden';
})
closeBtn_third.addEventListener('click', function () {
modal_third.style.display = "none";
body.style.overflow = 'scroll';
})
window.addEventListener('click', function (e) {
if(e.target == modal_third) {
modal_third.style.display = "none";
body.style.overflow = 'scroll';
}
})
//Fourth modal
var btn_fourth = document.querySelector('.modal-fourth-button'),
modal_fourth = document.querySelector('.modal-fourth'),
closeBtn_fourth = document.querySelector('.closeBtn-fourth');
btn_fourth.addEventListener('click', function() {
modal_fourth.style.display = 'flex';
body.style.overflow = 'hidden';
})
closeBtn_fourth.addEventListener('click', function () {
modal_fourth.style.display = "none";
body.style.overflow = 'scroll';
})
window.addEventListener('click', function (e) {
if(e.target == modal_fourth) {
modal_fourth.style.display = "none";
body.style.overflow = 'scroll';
}
})
//Fifth modal
var btn_fifth = document.querySelector('.modal-fifth-button'),
modal_fifth = document.querySelector('.modal-fifth'),
closeBtn_fifth = document.querySelector('.closeBtn-fifth');
btn_fifth.addEventListener('click', function() {
modal_fifth.style.display = 'flex';
body.style.overflow = 'hidden';
})
closeBtn_fifth.addEventListener('click', function () {
modal_fifth.style.display = "none";
body.style.overflow = 'scroll';
})
window.addEventListener('click', function (e) {
if(e.target == modal_fifth) {
modal_fifth.style.display = "none";
body.style.overflow = 'scroll';
}
})
//Modal Tuotekuva
// var btn_sizes = document.querySelector('.btn_sizes'),
// modal_sizes = document.querySelector('.modal_sizes'),
// closeBtn_sizes = document.querySelector('.closeBtn_sizes');
// btn_sizes.addEventListener('click', function() {
// modal_sizes.style.display = 'flex';
// })
// closeBtn_sizes.addEventListener('click', function () {
// modal_sizes.style.display = "none";
// })
// window.addEventListener('click', function (e) {
// if(e.target == modal_sizes) {
// modal_sizes.style.display = "none";
// }
// })
Простой
Простой
