Question

我创建了一个非常简单的弹出窗口。我想要的是当访问者第一次来到网站显示弹出窗口时，他必须选择两个按钮中的一个才能关闭弹出窗口。此外，我想在用户之前访问过该网站时不显示弹出框。我知道我可以使用localstorage，但我不知道这种技术。拜托，我需要有人给我写一些我必须在我的代码中添加的本地存储代码，以便当有人第一次访问网站时显示弹出窗口并选择其中一个按钮，如果他再次回来做不使用localstorage内存显示弹出窗口。

由于

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)

Answer 1

这是一般的想法。通过popup阅读localStorage.getItem()项，如果不存在，请显示弹出窗口并通过popup设置localStorage.setItem()

＆＃13;

var ls = localStorage.getItem('popup');
if (!ls) {
  document.getElementById('popup').classList.add('show');
  localStorage.setItem('popup',true);
}

＆＃13;

.popup {
  display: none;
}
.show {
  display: block;
}

＆＃13;

<div id="popup" class="popup">popup</div>

＆＃13;

访问者返回网站

1 个答案: