From 3afc8bd2fab3016553bdda8ff76930d4f7bbb808 Mon Sep 17 00:00:00 2001 From: victor Date: Wed, 3 Jul 2024 15:49:36 +0200 Subject: [PATCH] add modal --- web/index.html | 11 ++++++++++- web/script.js | 11 ++++++++++- web/style.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 2 deletions(-) diff --git a/web/index.html b/web/index.html index 6a9943c..b067c7a 100644 --- a/web/index.html +++ b/web/index.html @@ -17,6 +17,15 @@ + + +

Counter
Tourist
Information

@@ -25,7 +34,7 @@

The surroundings

Events

POINXS

-

Sustainability

+

About

diff --git a/web/script.js b/web/script.js index 0129d28..d7f348a 100644 --- a/web/script.js +++ b/web/script.js @@ -19,4 +19,13 @@ window.addEventListener("DOMContentLoaded", function (e) { footerEl.setAttribute("position", "left") } }) -}) \ No newline at end of file +}) + +function closemodal(){ + let modal = document.getElementById("modal"); + if (modal.style.display !== "none") { + modal.style.display = "none"; + } else { + modal.style.display = "block"; + } +} \ No newline at end of file diff --git a/web/style.css b/web/style.css index ed744a9..4ec0e61 100644 --- a/web/style.css +++ b/web/style.css @@ -115,6 +115,35 @@ p { margin-bottom: 1rem; } +.modaloverlay{ + position: fixed; + width: 100vw; + height: 100vh; + background: #212529; + z-index: 10000; + color: white; + padding: 5%; + + +} + +.modaltext{ + max-width: 80ch; + margin: auto; +} + +.closemodal{ + position: absolute; + left: 73%; + padding: 4px; + border: 2px solid white; +} + +.closemodal:hover{ + background-color: rgba(255, 255, 255, .5); + cursor: pointer; +} + .index { background: var(--green); width: 100%;