On ferme le modal avec le retour du navigateur
This commit is contained in:
parent
6d3033ba37
commit
2dde114ad8
@ -23,26 +23,46 @@ const isModalOpen = (modal) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Open modal
|
// Open modal
|
||||||
const openModal = (modal) => {
|
const openModal = (modal, back=true) => {
|
||||||
if (isScrollbarVisible()) {
|
if (isScrollbarVisible()) {
|
||||||
document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
|
document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
|
||||||
}
|
}
|
||||||
modal.setAttribute("open", true);
|
modal.setAttribute("open", true);
|
||||||
console.log("visible, " + modal);
|
if (back) {
|
||||||
|
window.history.pushState({ isPopup: true }, 'modal');
|
||||||
|
window.location.hash = modal.querySelector('header a.close').getAttribute('href');
|
||||||
|
}
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
visibleModal = modal;
|
visibleModal = modal;
|
||||||
}, 500);
|
}, 500);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Close modal
|
const hideModal = (modal) => {
|
||||||
const closeModal = (modal) => {
|
if (modal != null) {
|
||||||
if (escapeOk) {
|
|
||||||
visibleModal = null;
|
visibleModal = null;
|
||||||
document.documentElement.style.removeProperty("--scrollbar-width");
|
document.documentElement.style.removeProperty("--scrollbar-width");
|
||||||
modal.removeAttribute("open");
|
modal.removeAttribute("open");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Close modal
|
||||||
|
const closeModal = (modal) => {
|
||||||
|
if (escapeOk) {
|
||||||
|
hideModal(modal);
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener('popstate', event => {
|
||||||
|
if (event.state?.isPopup) {
|
||||||
|
if (escapeOk) {
|
||||||
|
hideModal(visibleModal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// Close with a click outside
|
// Close with a click outside
|
||||||
document.addEventListener("click", (event) => {
|
document.addEventListener("click", (event) => {
|
||||||
if (visibleModal != null) {
|
if (visibleModal != null) {
|
||||||
@ -59,6 +79,7 @@ document.addEventListener("keydown", (event) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Get scrollbar width
|
// Get scrollbar width
|
||||||
const getScrollbarWidth = () => {
|
const getScrollbarWidth = () => {
|
||||||
// Creating invisible container
|
// Creating invisible container
|
||||||
@ -84,4 +105,13 @@ const getScrollbarWidth = () => {
|
|||||||
// Is scrollbar visible
|
// Is scrollbar visible
|
||||||
const isScrollbarVisible = () => {
|
const isScrollbarVisible = () => {
|
||||||
return document.body.scrollHeight > screen.height;
|
return document.body.scrollHeight > screen.height;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function(e) {
|
||||||
|
if (window.location.hash != "") {
|
||||||
|
const modal = document.getElementById(window.location.hash.substring(1, window.location.hash.length));
|
||||||
|
if (modal != null)
|
||||||
|
openModal(modal, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
@ -45,6 +45,7 @@ $enable-responsive-typography: true;
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body>footer {
|
body>footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
|
Loading…
Reference in New Issue
Block a user