HTML CSS

FULLSCREEN OVERLAY WITH HTML CSS

(quick & simple example)

<div id="owrap"><div id="obox">   <p>TEXT</p>   <button onclick="document.   getElementById('owrap').   className=''">Close</button> </div></div>

OVERLAY HTML

01

<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); }

FULL PAGE OVERLAY

02

#owrap {   display: flex;   justify-content: center;   align-items: center; }

CENTER DIALOG BOX

03

#obox {   padding: 20px;   min-width: 400px; max-width: 600px;   background: #fff; }

SHOW/HIDE OVERLAY

04

#owrap {   transition: opacity 0.2s;   visibility: hidden; opacity: 0; }

#owrap.show {   visibility: visible; opacity: 1; }