Example Popup Modal

The following is a code snippet for a popup modal that overlays the page with a grayed down background.

  .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; }
<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=""> -->
  const ssclosers = document.querySelectorAll('.ss-close,.ss-bg');
  for (let i = 0; i < ssclosers.length; i++) {
    ssclosers[i].addEventListener('click', function(){
      if(window.SS && SS.EventTrack){
  document.querySelector('.ss-b1').addEventListener('click', function(){
    if(window.SS && SS.EventTrack){
    var date, expires;
    var days = 3;
    date = new Date();
    expires = "; expires="+date.toGMTString();
    document.cookie="ssmodal=1;"+expires+"; path=/";


  • Update days to represent when the modal can reappear on subsequent visits
  • Use a not contains ssmodal=1 cookie trigger
  • Use </body> as your insertion point in the Find this field
  • Update styling and content as desired (this can be saved to a file on your desktop before moving to a SiteSpect Variation for ease of updates)

The HTML <dialog> tag is now well supported

Consider it as an alternative approach to the above. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog