每次访问显示一次模态

Show modal once per visit

本文关键字：一次 模态 访问 显示      更新时间：2023-09-26

我知道这个问题之前被问过很多次，但我仍然找不到任何解决方案来解决我的"问题"，每次访问只显示一次我的模态。我也尝试了许多不同的（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)}
);

cookie选项的完整答案是：

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

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

注意：对于跨浏览器支持，最好使用 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>

你为什么不使用localstorage？

示例代码：

if (localStorage.getItem('IsModalShown').toString() != 'true') 
{
   showModal();
   localStorage.setItem('IsModalShown',true);
}
相关文章：