У меня есть pop up и в случае чего, я хочу чтобы у него был вертикальный скролл. Чтобы избежать двойного скролла у body и у модального окна, я с помощью js убираю скролл у body. Проблема в том, что из-за этого происходит сдвиг окна, как это исправить? Пытался добавить padding-right при открытии - не помогло.
Если нужна дополнительная информация, пишите!
Страница с модальным окном:
https://codepen.io/1kiritos1/pen/GRzdjGv
HTML:
<!-- Pop Up -->
<div class="pop-up">
<div class="pop-up_container">
<div class="pop-up_body">
<div class="pop-up_line"></div>
<form class="pop-up_form">
<h3 class="pop-up_title">
Edit Profile
</h3>
<div class="avatar">
<div class="avatar-wrapper">
<div class="avatar-inner">
<div class="avatar-circle">
<img src="img/profile.svg" alt="Profile" class="avatar-profile">
</div>
<div class="avatar-upload-btn">
<img src="img/camera.svg" alt="Camera">
<input type="file" accept="image/*" class="avatar-upload">
</div>
</div>
<p class="avatar-text">
Israel Israeli
</p>
<a href="#">
Change Profile Picture
</a>
</div>
</div>
<p class="pop-up_desc">
Short description about yourself
</p>
<textarea class="pop-up_textarea" maxlength="200" cols="30" rows="6"></textarea>
<button class="pop-up_btn">
Save changes
</button>
<p class="pop-up_tip">
See all your information on the <a href="#">profile page</a>. Please note, if you leave this page
without saving, all the changes you made will not be saved.
</p>
</form>
<button class="pop-up_close">
✖
</button>
</div>
</div>
</div>
<div class="wrapper">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, aliquid. Numquam excepturi autem culpa animi et. Aliquid quo ullam nulla debitis exercitationem dicta vel enim iusto inventore, cumque magni ducimus hic harum veniam, a itaque nostrum voluptate dolores possimus aliquam. Voluptatum, molestias aliquam. Omnis consectetur asperiores repellendus, laudantium amet a doloremque qui facilis alias suscipit nisi consequuntur eveniet aspernatur impedit dolor voluptas velit perspiciatis officiis repellat quia corporis. Voluptate consequuntur iure inventore temporibus, nemo suscipit modi autem corporis nostrum doloribus. Necessitatibus consequuntur, tempore incidunt voluptas enim modi a corporis magni recusandae error ducimus dolores eveniet ipsum deserunt vel alias obcaecati?</p>
<br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, aliquid. Numquam excepturi autem culpa animi et. Aliquid quo ullam nulla debitis exercitationem dicta vel enim iusto inventore, cumque magni ducimus hic harum veniam, a itaque nostrum voluptate dolores possimus aliquam. Voluptatum, molestias aliquam. Omnis consectetur asperiores repellendus, laudantium amet a doloremque qui facilis alias suscipit nisi consequuntur eveniet aspernatur impedit dolor voluptas velit perspiciatis officiis repellat quia corporis. Voluptate consequuntur iure inventore temporibus, nemo suscipit modi autem corporis nostrum doloribus. Necessitatibus consequuntur, tempore incidunt voluptas enim modi a corporis magni recusandae error ducimus dolores eveniet ipsum deserunt vel alias obcaecati?</p>
<br>
<button class="edit-button">
Edit Profile
</button>
</div>
CSS:
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.lock {
overflow: hidden;
}
.wrapper {
max-width: 1260px;
margin-inline: auto;
}
.pop-up {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.8);
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease-out; /* */
}
.pop-up.show {
opacity: 1;
visibility: visible;
}
.pop-up button {
cursor: pointer;
border: none;
}
.pop-up a {
color: #3399ff;
text-decoration: none;
}
.pop-up a:hover {
text-decoration: underline;
}
.pop-up_container {
min-height: 100%;
padding: 30px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.pop-up_body {
width: 100%;
max-width: 610px;
padding: 60px 40px 30px;
margin: auto;
background: #fff;
position: relative;
}
.pop-up_line {
width: 100%;
height: 10px;
background: #a5181b;
position: absolute;
top: 0;
left: 0;
}
.pop-up_title {
font-size: 60px;
font-weight: 700;
line-height: 60px;
color: #252525;
}
.pop-up_close {
width: 16px;
height: 24px;
position: absolute;
top: 40px;
right: 40px;
font-size: 20px;
color: #555;
background: transparent;
}
JS:
// Pop up
const popup = document.querySelector('.pop-up');
const popupBody = document.querySelector('.pop-up_body');
const closeBtns = document.querySelectorAll('.pop-up_close, .pop-up_btn');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', () => {
closePopup();
});
});
const editBtn = document.querySelector('.edit-button');
editBtn.addEventListener('click', () => {
openPopup();
});
// Close on press Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && popup.classList.contains('show')) {
closePopup();
}
});
// Close on click outside
document.addEventListener('click', (e) => {
let target = e.target;
let is_btn = target == editBtn || editBtn.contains(target);
let is_popup = target == popupBody || popupBody.contains(target);
let is_popup_show = popup.classList.contains('show');
if (!is_btn && !is_popup && is_popup_show) {
closePopup();
}
});
function openPopup() {
popup.classList.add('show');
bodyLock();
}
function closePopup() {
popup.classList.remove('show');
bodyUnlock();
}
function bodyLock() {
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;
}
function bodyUnlock() {
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
}
// Stil doesnt work:
// function bodyLock() {
// const body = document.querySelector('body');
// const paddingValue = window.innerWidth - document.querySelector('.wrapper').offsetWidth + 'px';
// body.style.paddingRight = paddingValue;
// body.classList.add('lock');
// }
// function bodyUnlock() {
// const body = document.querySelector('body');
// const timeout = 200; // Should be the same as pop-up transition
// setTimeout(() => {
// body.style.paddingRight = '0px';
// body.classList.remove('lock');
// }, timeout);
// }
