This commit is contained in:
2026-05-10 22:05:28 +02:00
parent cefca66094
commit 9050114508
3 changed files with 18 additions and 4 deletions

View File

@@ -1,20 +1,24 @@
document.getElementById("open-fin-modal").addEventListener("click", function() { document.getElementById("open-fin-modal").addEventListener("click", function() {
document.getElementById("fin-modal").style.visibility = "visible"; document.getElementById("fin-modal").style.visibility = "visible";
document.body.classList.add("modal-open");
}); });
document.querySelectorAll(".close-fin-modal").forEach(function(button) { document.querySelectorAll(".close-fin-modal").forEach(function(button) {
button.addEventListener("click", function() { button.addEventListener("click", function() {
document.getElementById("fin-modal").style.visibility = "hidden"; document.getElementById("fin-modal").style.visibility = "hidden";
document.body.classList.remove("modal-open");
}); });
}); });
document.getElementById("open-game-modal").addEventListener("click", function() { document.getElementById("open-game-modal").addEventListener("click", function() {
document.getElementById("game-modal").style.visibility = "visible"; document.getElementById("game-modal").style.visibility = "visible";
document.body.classList.add("modal-open");
}); });
document.querySelectorAll(".close-game-modal").forEach(function(button) { document.querySelectorAll(".close-game-modal").forEach(function(button) {
button.addEventListener("click", function() { button.addEventListener("click", function() {
document.getElementById("game-modal").style.visibility = "hidden"; document.getElementById("game-modal").style.visibility = "hidden";
document.body.classList.remove("modal-open");
}); });
}); });

View File

@@ -102,10 +102,12 @@ document.addEventListener("DOMContentLoaded", function() {
`; `;
document.body.insertAdjacentHTML("beforeend", modalHtml); document.body.insertAdjacentHTML("beforeend", modalHtml);
const modal = document.getElementById("image-modal"); const modal = document.getElementById("image-modal");
modal.style.visibility = "visible"; modal.style.visibility = 'visible';
document.body.classList.add("modal-open");
modal.querySelector(".close").addEventListener("click", () => { modal.querySelector(".close").addEventListener("click", () => {
modal.remove(); modal.remove();
document.body.classList.remove("modal-open");
}); });
}); });
}); });

View File

@@ -411,10 +411,16 @@ nav {
visibility: hidden; visibility: hidden;
} }
/* Prevent background scrolling while a modal is open */
body.modal-open {
overflow: hidden;
touch-action: none;
}
.close { .close {
position: absolute; position: fixed;
top: 10px; top: 12px;
right: 10px; right: 12px;
font-size: 2rem; font-size: 2rem;
background-color: var(--nav-btn-bg); background-color: var(--nav-btn-bg);
border: 1px solid var(--nav-btn-border); border: 1px solid var(--nav-btn-border);
@@ -444,6 +450,8 @@ nav {
position: relative; position: relative;
color: var(--text-color); color: var(--text-color);
transition: background-color 0.25s ease, color 0.25s ease; transition: background-color 0.25s ease, color 0.25s ease;
max-height: calc(100vh - 48px);
overflow: auto;
} }
/* Make images inside modals larger while constraining to viewport */ /* Make images inside modals larger while constraining to viewport */