Shopify jQuery Cookie Modal - This snippet adds a popup modal that use the js cookie jQuery plugin - https://github.com/js-cookie/js-cookie. Cookie expiration is controlled via settings for the client to control.

Shopify-popup-modal.liquid

<!-- MODAL - insert this in the main template so it is available for any page -->
{% if settings.enable-home-newsletter-modal != blank %} 
  <div class="tbm_modal-container">
    <div class="tbm_modal">
      <div class="tbm_modal-left-col" style="background-image:url({{ settings.tbm_modal_bg_image | img_url: 'original' }});">
      </div>
      <div class="tbm_modal-right-col">
        <h2>{{settings.tbm_cookie-modal-title}}</h2>
        <p>{{settings.tbm_cookie-modal-content}}</p>
        <!--FORM-->
        <div id="mc_embed_signup">
          <form action="{{ settings.tbm_cookie-modal-mailchimp }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
            <input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{settings.tbm_cookie-modal-email-placeholder}}" required="" type="email">
            <input value="{{ settings.tbm_cookie-modal-submit-text }}" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit">
          </form>
        </div>  
        <!--FORM ENDS-->

        <span class="tbm_modal-close">{{settings.tbm_cookie-modal-close-message}}</span>
      </div>
      <div class="tbm_modal-clear"></div>
    </div>
    <div class="tbm_modal-clickable"></div>
  </div>


<!-- MODAL SCRIPTS AND CODE-->
{{ 'js.cookie.js' | asset_url | script_tag }}

<script type="text/javascript">
  $(document).ready(function(){

    // resize modal column
    function tbm_modalResize(){
      var tbm_modalR = $('.tbm_modal-right-col').height();
      $('.tbm_modal-left-col').height(tbm_modalR);
    }
    tbm_modalResize();
    $(window).resize(function(){
      tbm_modalResize();
    });

    var cookieExpireSet = {{settings.tbm_cookie-expires}};
    var loftModalNewsletterCookie = "__loft_modal-newsletter-cookie";

    {%if settings.tbm_cookie-expires == "-1"%}
    Cookies.remove( loftModalNewsletterCookie , { path: '' });
    console.log('loft modal cookie removed');
    {% endif %}

    // set cookie, show popup
    if( Cookies.get(loftModalNewsletterCookie) != '1'){

      setTimeout(function(){
        tbm_modalResize();
        $('.tbm_modal-container').fadeIn(600);
        tbm_modalResize();
      }, {{settings.tbm_cookie-modal-delay}}  );

                 Cookies.set( loftModalNewsletterCookie , '1', { expires: cookieExpireSet });

    } else {
      console.log('loft popup - already visited');
    }       

    // close modal
    $('.tbm_modal-close, .tbm_modal-clickable').click(function(){
      $('.tbm_modal-container').fadeOut(400);
    });

  });
</script>
{% endif %}

<!-- MODAL STYLES -->
<style>
/*===============================
  Newsletter Modal SCSS
===============================*/

.tbm_modal-container {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,0.6);
  z-index: 1000000;
  top: 0;
  left: 0;
}
.tbm_modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0px;
  text-align: center;
  display: table;
  width: 700px;

  .tbm_modal-left-col, .tbm_modal-right-col {
    float: left;
    display: table-cell;
    padding: 50px 20px;
    vertical-align: middle;
  }
  .tbm_modal-left-col {
    width: 35%;
    display: block;
    background-size: cover;
    background-position: center;
  }
  .tbm_modal-right-col {
    width: 65%;
  }
  .tbm_modal-clear {
    clear: both;
  }
  h2 {
    font-size: 35px;
    font-weight: 800;
    margin: 0!important;
    line-height: 1.7;

    &::before {
      content: "";
      display: block;
      border-top: 3px solid #39b54a;
      width: 80px;
      margin: 10px auto;
    }
  }
  p {
    font-style: italic;
    font-family: times;
    font-size: 16px!important;
    margin-top: 0;
    margin-bottom: 40px;
  }
  input[type=email], 
  input[type=submit] {
    display: block!important;
    float: none!important;
    width: 60% !important;
    margin: 0 auto 10px!important;
    text-align: center;
    max-width: inherit !important;
  }
  input[type=email] {
    padding: 8px 25px;
    background: #fff;
    text-align: left !important;
    border: 2px solid #dedede;
    text-align: center;
  }
  input[type=submit] {
    padding: 12px 10px 12px;
    height: inherit !important;
    background: #39b54a;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    border: 0;
  }
  span.tbm_modal-close {
    font-size: 12px!important;
    color: #888;
    text-decoration: underline;
    margin-top: 40px;
    display: block;
    cursor: pointer;
  }
}
.tbm_modal-clickable {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  cursor: pointer;
}
@media(max-width:992px){
  .tbm_modal {
    width: 80%;
  }
  .tbm_modal h2 {
    font-size: 16px;
    font-weight: 100;
    margin: 0px 0 10px!important; 
    line-height: 1;
  }
  .tbm_modal-left-col, .tbm_modal-right-col {
    padding: 10px 20px;
  }
  .tbm_modal input[type=submit] {
    margin: 0;
    padding: 6px 0px 0px;
    font-size: 11px;
    line-height: 2!important;
    height: auto!important;
    width: 100%!important;
    border: 0;
    border-radius: 0;
  }
  .tbm_modal input[type=email] {
    padding: 5px;
    height: inherit;
    margin-bottom: 6px!important;
    line-height: 1;
    border: 0;
    border-radius: 0;
  }
  .tbm_modal span.tbm_modal-close {
    margin: 0;
  }
  .tbm_modal p {
    margin-bottom: 15px;
    line-height: 1.3;
    font-size: 14px!important;
  }
  .tbm_modal form {
    margin-bottom: 10px;
  }
  .tbm_modal-closeable {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: block;
    z-index: 9999;
  }
}
</style>


<!-- MODAL SCHEMA - add to settings_schema.json -->
{%comment%}

{
  "name": "Newsletter modal",
  "settings": [
    {
      "type": "header",
      "content": "Modal Settings"
    },
    {
      "type": "checkbox",
      "id": "enable-home-newsletter-modal",
      "label": "Enable newsletter modal"
    },
    {
      "type": "text",
      "id": "tbm_cookie-expires",
      "label": "How many days should modal not show",
      "default": "1",
      "info": "Setting to 1, will show after One day"
    },
    {
      "type": "text",
      "id": "tbm_cookie-modal-delay",
      "label": "Delay modal appearing",
      "default": "1000",
      "info": "Milliseconds, e.g 1000 = 1s"
    },
    {
      "type": "header",
      "content": "Modal content"
    },
    {
      "type": "image_picker",
      "id": "tbm_modal_bg_image",
      "label": "Upload modal image"
    },
    {
      "type": "text",
      "id": "tbm_cookie-modal-title",
      "label": "Title",
      "default": "GET 10% OFF"
    },
    {
      "type": "textarea",
      "id": "tbm_cookie-modal-content",
      "label": "Content",
      "default": "Subscribe now and receive a discount on your first order"
    },
    {
      "type": "text",
      "id": "tbm_cookie-modal-submit-text",
      "label": "Submit button text",
      "default": "Sign Up"
    },
    {
      "type": "text",
      "id": "tbm_cookie-modal-email-placeholder",
      "label": "Enter email here",
      "default": "Your Email"
    },
    {
      "type": "text",
      "id": "tbm_cookie-modal-close-message",
      "label": "Close message",
      "default": "No thanks, I don't like gifts"
    }
  ]
}

{%endcomment%}