Popup / Modal Generator

Trigger

Content

Appearance

<!-- Popup / Modal -->
<style>
.sqs-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.sqs-popup-overlay.active{opacity:1;visibility:visible;}
.sqs-popup-box{position:relative;background:#ffffff;max-width:480px;width:90%;padding:40px;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.2);transform:translateY(20px);transition:transform .3s ease;}
.sqs-popup-overlay.active .sqs-popup-box{transform:translateY(0);}
.sqs-popup-box h2{font-family:sans-serif;font-size:24px;font-weight:600;margin:0 0 12px;color:#111;}
.sqs-popup-box p{font-family:sans-serif;font-size:15px;line-height:1.6;color:#555;margin:0 0 24px;}
.sqs-popup-cta{display:inline-block;padding:14px 32px;background:#111;color:#fff;text-decoration:none;font-family:sans-serif;font-size:14px;font-weight:500;letter-spacing:.5px;border:none;cursor:pointer;transition:background .2s;}
.sqs-popup-cta:hover{background:#333;}
</style>

<div class="sqs-popup-overlay" id="sqsPopupOverlay">
  <div class="sqs-popup-box">
    <button class="sqs-popup-close" style="position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;cursor:pointer;color:#333;line-height:1;">&times;</button>
    <h2>Wait! Before you go...</h2>
    <p>Sign up for our newsletter and get 10% off your first order.</p>
    <a href="#" class="sqs-popup-cta">Get My Discount</a>
  </div>
</div>

<script>
(function(){
  var overlay = document.getElementById("sqsPopupOverlay");
  function showPopup(){
    if(localStorage.getItem("sqs_popup_shown"))return;
    localStorage.setItem("sqs_popup_shown","1");
    overlay.classList.add("active");
  }
  overlay.addEventListener("click",function(e){
    if(e.target===overlay||e.target.classList.contains("sqs-popup-close"))
      overlay.classList.remove("active");
  });
  setTimeout(showPopup,5000);
})();
</script>