Modal system respects day/night mode.

This commit is contained in:
Herbert Wolverson 2024-06-27 08:47:57 -05:00
parent 1a83857f98
commit 25824d4da6
2 changed files with 23 additions and 17 deletions

View File

@ -2,29 +2,14 @@
export function darkBackground(id) {
let darken = document.createElement("div");
darken.id = id;
darken.style.zIndex = 200;
darken.style.position = "absolute";
darken.style.top = "0px";
darken.style.bottom = "0px";
darken.style.left = "0px";
darken.style.right = "0px";
darken.style.background = "rgba(1, 1, 1, 0.75)";
darken.classList.add("darkenBackground")
return darken;
}
// Creates a div that sits happily atop the window
export function modalContent(closeTargetId) {
let content = document.createElement("div");
content.style.zIndex = 210;
content.style.position = "absolute";
content.style.top = "10%";
content.style.bottom = "10%";
content.style.left = "10%";
content.style.right = "10%";
//content.style.maxWidth = "500px";
//content.style.maxHeight = "500px";
content.style.background = "#eee";
content.style.padding = "10px";
content.classList.add("myModal");
content.appendChild(closeButton(closeTargetId));
return content;
}

View File

@ -53,4 +53,25 @@ body.dark-mode {
}
.tiny {
font-size: 8pt;
}
.darkenBackground {
z-index: 200;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: rgba(1, 1, 1, 0.75);
}
.myModal {
z-index: 210;
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
padding: 10px;
background: var(--bs-body-bg);
}