javascript - 仅显示一次网站入口模式

Question

我正在使用 remodal为了在有人访问它时在我的网站上显示模式。这就是它的工作原理。

加载 css 和 javascript:

<link rel="stylesheet" href="../dist/remodal.css">
<link rel="stylesheet" href="../dist/remodal-default-theme.css">
<script src="../dist/remodal.min.js"></script>

定义模态本身:

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

显示模态:

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

问题是每次我进入网站时，模式都会一次又一次地显示。

是否可以使用缓存或其他方式来控制它，以便为每个用户只显示一次模态？这意味着用户第一次访问网站时显示模态，用户关闭它，下次刷新网站时不显示。

如果可能，我该怎么做？

提前致谢。

Answer 1

看remodal init with js ，使用它而不是默认函数，在检查某个 cookie 是否存在之前，我们将其称为 seenModal:

if (getCookie("seenModal") != "true") {
    //display the modal
    document.cookie = "seenModal=true"; // sets the modal-cookie
} else {
    // modal already seen
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.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 "";
}