HTMl CSS JS

SIMPLE POPUP WITH HTML CSS JAVASCRIPT

POPUP HTML

01

<div id="popwrap"><div id="popbox">   <h1 id="poptitle">TITLE</h1>   <p id="poptext">TEXT</p>   <div id="popclose" onclick="pop.hide()">     &#9746;   </div> </div></div>

#popwrap {   FULLSCREEN COVER   position: fixed; top: 0; left: 0;   width: 100vw; height: 100vh;   background: rgba(0, 0, 0, 0.5);

POPUP WRAPPER CSS

02

  HIDDEN BY DEFAULT    display: none; }

#popbox {   position: absolute; top: 50%; left: 50%;   transform: translate(-50%, -50%);   min-width: 320px; background: #fff; }

POPUP BOX & CLOSE BUTTON CSS

03

#popclose {   position: absolute; top: 0; right: 5px;   font-size: 28px; }

var show = (title, txt) => {   document.getElementById("poptitle")     .innerHTML = title;   document.getElementById("poptext")     .innerHTML = txt;   document.getElementById("popwrap")     .style.display = "flex"; };

JAVASCRIPT SHOW HIDE

04

var hide = () => {   document.getElementById("popwrap")     .style.display = "none"; };