chadsconway · December 29, 2021 00:13
diff --git a/popup.css b/popup.css
 /* (A) WRAPPER */
 #pop-up {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 999;
  width: 400px;
  background: rgba(10, 10, 10, 0.8);
  visibility: hidden;
  opacity: 1;
  animation-name: fadein, slidein;
  animation-duration: 0.5s, 1s;
 }
 #pop-up.open {
  visibility: visible;
  opacity: 1;
 }

 /* (D) TEXT */
 #pop-text {
  padding: 10px;
  margin: 0;
  color: #ffffff;
  font-size: 30px;
 }
 @keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 @keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
 }
 @keyframes slidein {
  from {
    right: -400px;
  }
  to {
    right: 50px;
  }
 }
diff --git a/popup.html b/popup.html
 <!DOCTYPE html>
 <html>

  <head>
    <title>Javascript Popup</title>

    <!-- (A) CSS + JS -->
    <link rel="stylesheet" href="popup.css" />
  </head>

  <body>
    <!-- (B) THE DEMO -->
    <input type="button" onclick="location.reload(); " value="Show" />
    <script src="popup.js"></script>
  </body>

 </html>
diff --git a/popup.js b/popup.js
 var pop = {
  // (A) ATTACH POPUP HTML
  pWrap: null,
  pText: null, // HTML popup text
  init: function () {
    // (A1) POPUP WRAPPER
    pop.pWrap = document.createElement("div");
    pop.pWrap.id = "pop-up";
    document.body.appendChild(pop.pWrap);
    // (A4) TEXT
    pop.pText = document.createElement("p");
    pop.pText.id = "pop-text";
    pop.pWrap.appendChild(pop.pText);
  },

  // (B) OPEN POPUP
  open: function (text) {
    pop.pText.innerHTML = text;
    document.querySelector("#pop-up").style.visibility = "visible";
  },

  // (C) CLOSE POPUP
  close: function () {
    document.querySelector("#pop-up").remove();
  },
 };
 displayPopup = function (contents) {
  pop.init();
  pop.open(contents);
  setTimeout(function () {
    pop.close();
  }, 2000);
 };
 displayPopup("this is a test");