javascript - 每次访问显示一次模态

Question

我知道这个问题之前被问过很多次，但我仍然找不到任何解决方案来解决我的“问题”，即每次访问仅显示一次我的模式。我也尝试过许多不同的(cookie)脚本，但没有任何东西可以与现有脚本结合使用。非常非常感谢!

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(延迟启动弹出窗口)

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

Answer 1

cookie 选项的完整答案是:

1. 显示弹出窗口后，将 cookie 添加到浏览器。
2. 每次检查浏览器是否有此 cookie。

由于技术原因，您无法在此处看到结果(预览的 iframe 设置为 sanbox iframe)，因此您可以看到它 here .

注意:为了实现跨浏览器支持，最好使用 cookie 而不是 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>