Add a popup (lightbox) with overlay and close buttons

Pretty simply script in HTML, CSS and JS

There is no cookie check, so this appear on all webpages if inserted in a header.php file, or if this is simply being injected to all pages. So beware of that.

Here is the full code if you just want to use inline CSS and inline JS and quick resolve

<div class="overlay" id="popup">
<div class="popup-content">
<h2>Servicemeddelelse</h2>
<p>mail.abusiness.dk er utilgængelig fra 22:00 og estimeret 2 timer frem i dag den 25 januar 2024. <br />Vi beklager de gener det måtte medføre.</p>
<button class="btn btn-primary" onclick="closePopup()">Luk</button>
</div>
</div>
<style>
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.popup-content p {
color: black;
font-size: 19px;
}
.popup-content {
background: #fff;
padding: 20px;
text-align: center;
}
.buttonclass {
background: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const popup = document.getElementById("popup");
popup.style.display = "flex";
});

function closePopup() {
const popup = document.getElementById("popup");
popup.style.display = "none";
}
</script>