Simple Overlay with Cookie (only shown once or on action)

Simple-Overlay-Cookie.css

/* credits @ https://www.w3schools.com/howto/howto_css_overlay.asp */
.g-simple-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  cursor: pointer;
  color: white;
  background: rgba(0, 0, 0, 0.85);
  
  /* if you want to use a semi transparent background use these lines and remove background above
  background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url(../img/your_img.svg);
  background-repeat: no-repeat;
  background-size: cover; */
  
}
.g-simple-overlay .simple-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: auto;
  margin-top: auto;
}
.g-simple-overlay .simple-container strong {
  color: #fff;
}
.g-simple-overlay .close {
  top: 1.25rem;
  right: 0.5rem;
  position: absolute;
  color: #fff;
  font-size: 3rem;
  opacity: 0.7;
  width: 50px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.g-simple-overlay .close:hover, .g-simple-overlay .close:focus, .g-simple-overlay .close:active {
  opacity: 1;
}
.g-simple-overlay div {
  width: 100%;
  text-align: center;
  font-size: 20px;
  padding-top: 6rem;
}

Simple-Overlay-Cookie.html

<div id="simple-overlay" class="g-simple-overlay" style="display:none" onclick="overlayOff()">
  <div class="simple-container">Your Text,<br><br> and whatever <strong>you want!</strong></div>
  <button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

Simple-Overlay-Cookie.js

var simpleOverlayCookieName = 'simple-overlay';

/* credits @ https://www.w3schools.com/howto/howto_css_overlay.asp */
function overlayOn() {
  document.getElementById('simple-overlay').style.display = 'block';
}

function overlayOnCheck() {
  var cookie = getCookie(simpleOverlayCookieName);
  if (cookie == '') {  
    document.getElementById('simple-overlay').style.display = 'block';
  }
}

function overlayOff() {
  document.getElementById('simple-overlay').style.display = 'none';
  var cookie = getCookie(simpleOverlayCookieName);
  if (cookie == '') {  
    setCookie(simpleOverlayCookieName, 'true', 30);
  }
}

/* credits @ https://www.w3schools.com/js/js_cookies.asp */
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

jQuery(document).ready(function() {
  overlayOnCheck();
});

Simple-Overlay-Cookie.scss

/* credits @ https://www.w3schools.com/howto/howto_css_overlay.asp */
.g-simple-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  cursor: pointer;
  color: white;
  background: rgba(0,0,0,0.85);
  
  //if you want to use a semi transparent background use these lines and remove background above
  //background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url(../img/your_img.svg);
  //background-repeat: no-repeat;
  //background-size: cover;
  
  .simple-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: auto;
    margin-top: auto;

    strong {
	  color: #fff;
    }
  }
  
  .close {
    top: 1.25rem;
    right: 0.5rem;
    position: absolute;
    color: #fff;
    font-size: 3rem;
    opacity: 0.7;
    width: 50px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;

    &:hover, &:focus, &:active {
      opacity: 1;
    }
  }

  div {
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding-top: 6rem;
  }
}