Show modal once per visit

Question

I know this question is asked many times before, but I can't still find any solution to my 'problem' to show my modal only one time per visit. I've tried also many different (cookie) scripts but nothing works in combination with the existing script. Many, many Thanks!

HTML

<div id="MyPopup" class="overlay">
  <div class="autopop">
    <a class="close" href="#MyPopup">&times;</a>
    <div class="a-content">
      Some content goes here.
    </div>
  </div>
</div>

CSS

.overlay::before,
.overlay .autopop {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
}
.overlay::before {
  content: "";
  background: rgba(0, 0, 0, .8);
  display: block;
  z-index: 99990
}
.overlay .autopop {
  width: 30%;
  height: 70%;
  margin: auto;
  font: 18px/1.5em Open Sans;
  background: #ff9933;
  border-radius: 5px;
  box-shadow: 0 10px 15px 0 #000;
  z-index: 99999;
  transition: all 3s ease-in-out;
}
.overlay:target::before {
  display: none;
}
.overlay:target .autopop {
  top: -200%;
  right: -200%;
  transform: rotate(90deg);
}
.autopop .a-content {
  height: 100%;
  overflow: auto;
  padding: 0 10px;
}
.autopop .close {
  top: 0;
  right: 15px;
  font: 800 30px Open Sans;
  color: #fff !important;
  transition: all 0.2s;
  position: absolute;
}

JQUERY (to start popup with a delay}

$(document).ready(function(){
   $("#MyPopup").hide(0).delay(7000).fadeIn(0)}
);

Answer 1

The full answer for the cookie option is:

1. Once you shows the popup, add a cookie to the browser.
2. In each time the, check if the browser has this cookie.

You can't see the result here because of technic reason (the iframe of the preview is setted as sanbox iframe) so you can see it here.

Note: for cross browser support it's better to use cookie instead of localStorage.

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;
}

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 "";
}

var cookie = getCookie('shown');
if (!cookie) {
  showPopup();
}

function showPopup() {
  setCookie('shown', 'true', 365);
  document.querySelector('#MyPopup').style.display = 'block';
}

#MyPopup {
  display:none;  
}

<div id="MyPopup" class="overlay">
  <div class="autopop">
    <a class="close" href="#MyPopup">&times;</a>
    <div class="a-content">
      Some content goes here.
    </div>
  </div>
</div>

Answer 2

Why don't you use localstorage?

Example code:

if (localStorage.getItem('IsModalShown').toString() != 'true') 
{
   showModal();
   localStorage.setItem('IsModalShown',true);
}