每次访问显示一次模态

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>

Answer 2

您为什么不使用localstorage？

示例代码：

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