Mermutef/LMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modals: preserve page scroll position while locking background

Browse Source
This commit is contained in:
Vladislav Kopnin
2026-09-29 20:58:41 +03:00
parent ff77e2b301
commit 64fdf61d98
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/main/resources/static/css/app.css
View File

@@ -241,9 +241,12 @@ dialog.modal {
box-shadow: 0 20px 60px rgba(0,0,0,0.35); box-shadow: 0 20px 60px rgba(0,0,0,0.35);
} }
dialog.modal::backdrop { background: rgba(0,0,0,0.55); } dialog.modal::backdrop { background: rgba(0,0,0,0.55); }
/* Пока открыта модалка — страница не прокручивается; прокрутка остаётся внутри .modal-body */ /* Пока открыта модалка — страница не прокручивается, позиция скролла сохраняется;
html.modal-open, html.modal-open body { overflow: hidden; } прокрутка остаётся внутри .modal-body */
html.modal-open body { padding-right: var(--modal-scrollbar, 0); } html.modal-open body {
position: fixed; left: 0; right: 0; width: 100%; top: var(--modal-top, 0);
padding-right: var(--modal-scrollbar, 0);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--c-border); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--c-border); }
.modal-title { margin: 0; font-size: 1.0625rem; font-weight: 600; } .modal-title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.modal-close { border: none; background: none; cursor: pointer; font-size: 1.25rem; color: var(--c-text-muted); padding: 0 0.25rem; } .modal-close { border: none; background: none; cursor: pointer; font-size: 1.25rem; color: var(--c-text-muted); padding: 0 0.25rem; }

11
web/src/main/resources/templates/fragments/base.html
View File

@@ -36,16 +36,23 @@
function closeModal(id){ var d=document.getElementById(id); if(d) d.close(); syncModalScrollLock(); } function closeModal(id){ var d=document.getElementById(id); if(d) d.close(); syncModalScrollLock(); }
function openModalData(btn){ openModal(btn.dataset.modal); } function openModalData(btn){ openModal(btn.dataset.modal); }
function closeModalData(btn){ closeModal(btn.dataset.modal); } function closeModalData(btn){ closeModal(btn.dataset.modal); }
/* Пока открыта хоть одна модалка — блокируем прокрутку страницы (внутри .modal-body прокрутка остаётся). */ /* Пока открыта хоть одна модалка — блокируем прокрутку страницы, сохраняя позицию скролла
(внутри .modal-body прокрутка остаётся). */
var modalScrollY = 0;
function syncModalScrollLock(){ function syncModalScrollLock(){
var root = document.documentElement; var root = document.documentElement;
if (document.querySelector('dialog[open]')) { if (document.querySelector('dialog[open]')) {
if (root.classList.contains('modal-open')) return;
modalScrollY = window.scrollY || window.pageYOffset || 0;
var sw = window.innerWidth - root.clientWidth; var sw = window.innerWidth - root.clientWidth;
root.style.setProperty('--modal-scrollbar', (sw > 0 ? sw : 0) + 'px'); root.style.setProperty('--modal-scrollbar', (sw > 0 ? sw : 0) + 'px');
root.style.setProperty('--modal-top', (-modalScrollY) + 'px');
root.classList.add('modal-open'); root.classList.add('modal-open');
} else { } else if (root.classList.contains('modal-open')) {
root.classList.remove('modal-open'); root.classList.remove('modal-open');
root.style.removeProperty('--modal-scrollbar'); root.style.removeProperty('--modal-scrollbar');
root.style.removeProperty('--modal-top');
window.scrollTo(0, modalScrollY);
} }
} }
document.addEventListener('toggle', function (e) { document.addEventListener('toggle', function (e) {