HTMl CSS JS

SIMPLE POPUP WITH HTML CSS JAVASCRIPT

THE 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>

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

CSS MECHANICS PART A

02

  CENTER BOX ON PAGE   justify-content: center;   align-items: center;   HIDDEN BY DEFAULT    display: none; }

POPUP BOX #popbox {   position: relative;   box-sizing: border-box;   min-width: 320px;   background: #fff; }

CSS MECHANICS PART B

03

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

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

JAVASCRIPT SHOW HIDE

04

  hide : function () {     document.getElementById     ("popwrap").style.display = "none";   } };