HTML CSS
(quick & simple example)
<div id="owrap"><div id="obox"> <p>TEXT</p> <button onclick="document. getElementById('owrap'). className=''">Close</button> </div></div>
<button onclick="document.getElementById ('owrap').className=''show">Open</button>
#owrap { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999; background: rgba(0, 0, 0, 0.5); }
#owrap { display: flex; justify-content: center; align-items: center; }
#obox { padding: 20px; min-width: 400px; max-width: 600px; background: #fff; }
#owrap { transition: opacity 0.2s; visibility: hidden; opacity: 0; }
#owrap.show { visibility: visible; opacity: 1; }