Example Popup Modal

<style>
  .ss-bg {  background-color:black;opacity:.45;width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;z-index:9998; }
  .ss-modal { background-color:white;width:500px;min-height:250px;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-250px;text-align:center;z-index:9999;padding-top: 50px; }
  .ss-t1 { font-size: 36px; font-weight: bold; color: black; }
  .ss-t2 { font-size: 22px; font-weight: normal; color: #333; line-height: 140%; }
  .ss-t3 { font-size: 22px; font-weight: bold; color: black; line-height: 140%; }
  .ss-t4 { font-size: 11px; font-weight: normal; color: black; margin-top: 5px; }
  .ss-b1 { margin: 30px; padding: 12px 50px; background-color: #0055A5; color: white; font-weight: bold;  display: inline-block; cursor: pointer; }
  .ss-image { width: 500px;display: block;margin: auto; }
  .ss-close { position: absolute; top: 0; right: 3px; font-size: 24px; cursor: pointer; padding: 10px; }
  .ss-hide { display: none; }
  @media only screen and (max-width: 500px) {
    .ss-modal { width:300px;;min-height:300px;position:fixed;top:50%;left:50%;margin-left:-150px;margin-top:-270px;text-align:center;z-index:9999;padding-top: 40px; }
    .ss-t2, .ss-t3 { font-size: 18px; }
  }
</style>
<div class="ss-bg"></div>
<div class="ss-modal">
<div class="ss-close">X</div>
<div class="ss-t1">SAVE 15% OFF</div>
<div class="ss-t2">all merchandise with code: <span>GIFTING15</span></div>
<div class="ss-t3">&plus; free shipping, no minimum</div>
<div class="ss-t4">exclusions apply</div>
<a href="/sale/#page_name=global&link_section=header&link_name=30_off_online_only&template_type=sitewide_banner"><div class="ss-b1">shop now</div></a>
<!-- <img class="ss-image" src=""> -->
</div>
<script>
  const ssclosers = document.querySelectorAll('.ss-close,.ss-bg');
  for (let i = 0; i < ssclosers.length; i++) {
    ssclosers[i].addEventListener('click', function(){
      document.querySelector('.ss-bg').classList.add('ss-hide');
      document.querySelector('.ss-modal').classList.add('ss-hide');
      if(window.SS && SS.EventTrack){
        SS.EventTrack.rp('modalclose');
      }
    });
  }
  document.querySelector('.ss-b1').addEventListener('click', function(){
    if(window.SS && SS.EventTrack){
      SS.EventTrack.rp('modalshopnow');
    }
  });
  (function(){
    var date, expires;
    var days = 3;
    date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    expires = "; expires="+date.toGMTString();
    document.cookie="ssmodal=1;"+expires+"; path=/";
  })();
</script>
</body>