Add a popup (lightbox) with overlay and close buttons

See demo here: Click here

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. This is used to be placed on a single page to tell something quick and basic.

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>Headline</h2>
<p>Text here</p>
<button class="btn btn-primary" onclick="closePopup()">Close</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>