如何制作弹出窗口 <div> 每个设备仅显示一次？

Question

所以我一直在尝试在我的网站主页上制作一个弹出窗口，仅在设备第一次访问我的网站时显示，然后，当它通过按钮关闭时，它不应该再出现。 为了做到这一点，我尝试了数千种方法和片段，但没有一个奏效。

这是我现在的代码：

html

<div class="popup" id="popup">
    <!-- more elements for design purposes -->
    <button class="allCookies" onclick="closePopup()">Close popup</button>
</div>

CSS

.popup {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    z-index: 1;
}

JS

var popup = document.getElementById("popup");
var popupShown = localStorage.getItem("popupShown");

function closePopup() {
  popup.style.display = "none";
  localStorage.setItem("popupShown", "true");
}

if (popupShown === null || popupShown === "false") {
  popup.style.display = "block";
}

我希望弹出窗口仅在我第一次打开该 html 页面时显示，尽管每次重新加载页面时弹出窗口都会显示。 有人可以帮我吗？

Answer 1

在你的 CSS 中设置了

display: block

，我想你想将其更改为

display: none

，否则默认值将是始终显示。即使您没有在 javascript 中将显示设置为阻止，由于 CSS 的原因，它也已经如此。改变它应该没问题。

旁注：

您可以用

"false"

解析

JSON.parse

:

JSON.parse("false") // false

你也可以使用

Boolean

构造函数，尽管不赞成：

Boolean("false") // false