mobile
This commit is contained in:
@@ -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");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -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");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
Reference in New Issue
Block a user