saosangmo/popup.html

## popup.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .popup {
          position: fixed;
          top: 50vh;
          left: 50%;
          width:400px;
          margin-left: -200px;
          margin-top: -150px;
          text-align: center;
          background-color:white;
          border:2px solid #222;
          border-radius: 15px;
          -moz-box-shadow: 0 0 20px #000000;
          -webkit-box-shadow: 0 0 20px #000000;
          box-shadow: 0 0 20px #000000;
      }

      .popup button {
          margin-top:10px;
          margin-bottom:20px;
          font-size:larger;
          width:200px;
          padding: 12px 15px;
          border: none;
          background: #1fb25a;
          color: #222222;
          text-shadow: none;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          cursor:pointer;
      }

      .popup button:hover {
          background: #aaa;
      }

      .popup input {
          width:300px;
          font-size:larger;
      }

      .popup a {
          margin-left:30px;
          font-size:smaller;
      }
    </style>
  </head>
  <body>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        var
         $body = document.querySelector("body"),
         popup = {
             html: "<div class='popup'><h1>{{title}}</h1><h2>{{message}}</h2><div><input name='email' placeholder='Your e-mail address'/</div><div><button>Sign Up</button> <a href='#'>Close</a></div></div>",
             message: "Enter your message here!",
             title: "Your TITLE"
         };
       setTimeout(function() {
          var popupdiv=document.createElement("div");
          popup_html = popup.html
          for (var key in popup) {
            popup_html = popup_html.replace("{{" + key + "}}", popup[key])
          }
          popupdiv.innerHTML = popup_html;
          popupdiv.id = "popup"
          $body.appendChild(popupdiv);

          var $popup = document.querySelector("#popup"),
            $popupButton = $popup.querySelector("button"),
            $popupInput = $popup.querySelector("input"),
            $popupClose = $popup.querySelector("a");
            $popupButton.onclick = function() {
                v = $popupInput.value;
                if (isNotValid(v)) {
                    $popupInput.style.backgroundColor = "#ffdddd"
                    return
                }
              $popup.style.display = 'none'
            }

            $popupClose.onclick = function() {
                $popup.style.display = 'none'
            }

            function isNotValid(v) {
                return (v.length == 0 || v.indexOf("@") > v.indexOf(".") || v.indexOf(".") < 0 || v.indexOf("@") < 0)
            }
      }, 500)
      });
    </script>
  </body>
</html>