HTMl CSS JS
(quick & simple example)
<div id="popwrap"><div id="popbox"> <h2 id="poptitle">TITLE</h2> <p id="poptext">TEXT</p> <div id="popclose" onclick="pop.close()"> ✖ </div> </div></div>
#popwrap {
FULLSCREEN position: fixed; top: 0; left: 0; z-index:999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5);
CENTER ON SCREEN display: flex; align-items: center; justify-content: center;
HIDDEN BY DEFAULT display: none;
}
DIMENSIONS & BACKGROUND COLOR #popbox { min-width: 320px; max-width: 600px; position: relative; background: #fff; }
CLOSE BUTTON #popclose { position: absolute; top: 5px; right: 10px; cursor: pointer; }
var show = (title, txt) => { document.getElementById("poptitle") .innerHTML = title; document.getElementById("poptext") .innerHTML = txt; document.getElementById("popwrap") .style.display = "flex"; };
var hide = () => { document.getElementById("popwrap") .style.display = "none"; };