Welcome Modal

behavior.js

/*\
|*|
|*|  :: cookies.js ::
|*|
|*|  A complete cookies reader/writer framework with full unicode support.
|*|
|*|  Revision #1 - September 4, 2014
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*|  Syntaxes:
|*|
|*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*|  * docCookies.getItem(name)
|*|  * docCookies.removeItem(name[, path[, domain]])
|*|  * docCookies.hasItem(name)
|*|  * docCookies.keys()
|*|
\*/

var docCookies = {
  getItem: function (sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    if (!sKey) { return false; }
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

(function welcomeModal() {
  if(docCookies.getItem('showEFLSignupModal') === 'true' ) return;
  setTimeout( function() {
    $('#welcome-modal').addClass('visible');
    $('#welcome-modal .close-modal').click(function() {
      $('#welcome-modal').removeClass('visible');
    });
  }, 3000);

  // UNCOMMENT LINE BELOW WHEN TESTING IS OVER
  // docCookies.setItem('showEFLSignupModal', 'true');
})();

layout.html

<div class="" id="welcome-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <span class="close-modal"><i class="fa fa-times"></i></span>
        <div class="box">
          <img height="70" width="96" class="logo-img" src="{{ 'logo-black.png' | asset_url }}" alt="Company logo" />
          <h3>Sign up to be the first to know<br />
            <small>about early bird pricing, special perks &amp; more</small></h3>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</div>

styles.scss

/* Modal which is seen by a user on their first visit. */
#welcome-modal {
  display: none;
}
#welcome-modal.visible {
  display: block;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  z-index: 999;
}
#welcome-modal .modal-dialog { margin-top: 80px; }
#welcome-modal .modal-body {
  text-align: center;
  background-color: #f4f1ec;
  background-image: url({{ 'bg-modal.jpg' | asset_url }});
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 250px;
  position: relative;
}
#welcome-modal .close-modal {
  position: absolute;
  top: 0;
  cursor: pointer;
  width: 40px;
  line-height: 40px;
  left: -40px;
  background-color: #f4f1ec;
}
#welcome-modal {
  .box {}
  #mce-EMAIL { border-radius: 0; }
  #mce-error-response,
  .error-msg { background: #FFE3E3; font-size: 14px; padding: 5px; }
  #mce-success-response { background: #CCFDE1; font-size: 14px; padding: 5px; }
  h3 {
    line-height: 1;
    margin: 20px 0;
    small { font-size: 15px; }
  }
  #subscribe {
    font-size: 20px;
    margin-left: -4px;
    width: 110px;
    line-height: 35px;
    position: relative;
    top: 0px;
    display: block;
    float: left;
  }
  .form_control {
    font-size: 20px;
    height: 33px;
    border-radius: 0;
  }
  img { max-width: 100%; height: 70px }
  .logo-img { height: 70px; width: 96px; }
}
@media (max-width: 768px) {
  #welcome-modal {
    .close-modal { left: 0; top: -40px; }
    .box {
      margin-top: 25px;
      padding: 25px 5px;
      width: 100%;
      background: rgba(244, 241, 236, 0.7);
    }
    .form_control {
      width: 150px;
      float: left;
    }
    #mce-EMAIL,
    #subscribe {
      height: 37px;
      line-height: 33px;
      padding-top: 0;
      padding-bottom: 0;
    }
    form#mc-embedded-subscribe-form {
      width: 296px;
      margin: auto;
    }
  }
}
@media (min-width: 768px) {
  #welcome-modal .modal-body {
    padding: 20px;
    min-height: 300px;
    margin: auto;
    width: 560px;
  }
  #welcome-modal .box { width: 380px; }
  #welcome-modal .form_control {
    width: 350px;
    float: left;
  }
  #welcome-modal form#mc-embedded-subscribe-form {
/*     width: 400px; */
    margin: auto;
  }
  #welcome-modal #mc-embedded-subscribe { padding: 8px 20px; }
}