我创建了一个非常简单的弹出窗口。我想要的是,当访问者第一次访问该网站以显示弹出窗口时,他必须选择两个按钮之一才能关闭弹出窗口。此外,我不想在用户之前访问过该站点时显示弹出框。我知道我可以为此使用本地存储,但我不知道该技术。拜托,我需要有人给我写我必须添加到我的代码中的本地存储代码,以便当有人第一次访问该网站时显示弹出窗口并选择两个按钮之一,如果他再次回来做不使用本地存储内存显示弹出窗口。
谢谢
HTML:
<div id="popup">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque minus deleniti ex consequatur, rem, mollitia modi odit? Animi odit provident architecto omnis optio est, ut natus voluptatum, inventore deleniti laboriosam.
</div>
<div id="myButtons">
<button id="button-left">Click Left</a>
<button id="button-right">Click Right</a>
</div>
</div>
CSS:
#popup {
width: 30%;
margin: 50px auto;
padding: 50px;
border: 10px solid #000;
}
#close-button {
cursor: pointer;
}
#text {
margin-top: 20px;
}
#button-left {
display: inline-block;
padding: 10px;
background: #b4b0a9;
float: left;
margin-top: 10px;
}
#button-right {
display: inline-block;
padding: 10px;
background: #b4b0a9;
float: right;
margin-top: 10px;
}
JavaScript:
var popup = document.getElementById("popup");
var close_button = document.getElementById("close-button");
var mainText = document.getElementById("text");
var button_left = document.getElementById("button-left");
var button_right = document.getElementById("button-right");
function closeBoxLeft() {
popup.style.display = "none";
}
button_left.addEventListener("click", closeBoxLeft)
function closeBoxRight() {
popup.style.display = "none";
}
button_right.addEventListener("click", closeBoxRight)
最佳答案
这是一般的想法。通过localStorage.getItem()
读取popup
项,如果不存在则显示popup并通过设置
popup
>localStorage.setItem()
var ls = localStorage.getItem('popup');
if (!ls) {
document.getElementById('popup').classList.add('show');
localStorage.setItem('popup',true);
}
.popup {
display: none;
}
.show {
display: block;
}
<div id="popup" class="popup">popup</div>
关于javascript - 访问者返回网站后不显示弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43665010/