The pattern: a full-screen semi-transparent overlay with a centered content box, toggled by a class. Open on a trigger, close on the X, the backdrop, or Escape. Modern HTML has a native <dialog> element (showModal()) that handles focus trapping and Escape for free — prefer it, but the manual DHTML version still teaches the mechanics.
<!doctype html><html><head><meta charset="utf-8"><style>.bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;place-items:center}.bg.on{display:grid}.box{background:#140a28;color:#e6e0ff;padding:24px;border-radius:8px}</style></head>
<body style="background:#06040d;padding:20px"><button id="open">open</button><div class="bg" id="bg"><div class="box">hello <button id="close">×</button></div></div>
<script>const bg=document.getElementById('bg');open.onclick=()=>bg.classList.add('on');close.onclick=()=>bg.classList.remove('on');bg.onclick=e=>{if(e.target===bg)bg.classList.remove('on');};</script></body></html>