Как можно избежать сдвига контента при открытии модального окна?
У меня есть 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"> &#10006 </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> |
<!-- 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"> &#10006 </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; } |
*, *: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); // } |
// 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); // }
Дополнительно:
body{width: 100%;}
Попробуйте scrollbar-gutter, вдруг поможет
Вот здесь можно почитать
- Стало менее заметнее, спасибо!
- это хорошо но нет поддержки в safari
Ответы:
JS для этого не нужен. Одна строка в CSS:
.pop-up { overscroll-behavior: contain; }
function bodyLock() { document.body.style.overflow = 'hidden'; } function bodyUnlock() { document.body.removeAttribute('style'); } |
function bodyLock() { document.body.style.overflow = 'hidden'; } function bodyUnlock() { document.body.removeAttribute('style'); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для избежания сдвига контента при открытии модального окна, можно использовать следующие методы:
1. Установить фиксированную ширину модального окна: задание фиксированной ширины модального окна позволит избежать сдвига контента при его открытии. Например, можно задать ширину модального окна в процентах или пикселях.
```html
<div class="modal" style="width: 400px"> <!-- Контент модального окна --> </div><div class="modal" style="width: 400px"> <!-- Контент модального окна --> </div>
```
2. Использовать свойство overflow:hidden для body: добавление свойства overflow:hidden к body при открытии модального окна предотвращает появление полосы прокрутки, что также может вызвать сдвиг контента.
```html
function openModal() { document.body.style.overflow = 'hidden'; // Открытие модального окна } function closeModal() { document.body.style.overflow = ''; // Закрытие модального окна }function openModal() { document.body.style.overflow = 'hidden'; // Открытие модального окна } function closeModal() { document.body.style.overflow = ''; // Закрытие модального окна }
```
3. Использовать position:fixed для модального окна: задание свойства position:fixed для модального окна позволит ему "плавать" поверх контента без влияния на его расположение.
```html
<div class="modal" style="position: fixed"> <!-- Контент модального окна --> </div><div class="modal" style="position: fixed"> <!-- Контент модального окна --> </div>
```
4. Предварительно выделять место для модального окна: если известно, что модальное окно будет отображаться на странице, можно предварительно выделить место для него с помощью пустого блока или скрытого элемента.
```html
<div class="modal-placeholder"> <!-- Пустой блок для выделения места --> </div><div class="modal-placeholder"> <!-- Пустой блок для выделения места --> </div>
```
Используя вышеуказанные методы, можно избежать сдвига контента при открытии модального окна и обеспечить плавное отображение пользовательского интерфейса.