Question

如何将点击事件保存到本地存储以隐藏用户的弹出窗口。他需要点击一次接受。如果他点击取消，弹出窗口应该再次打开

<div id="overlay">
  <div class="popup">
    <div id="popup_terms">
      blablabla
    </div>
    <button id="accept" type="button">accept</button>
    <button id="cancel" type="button">cancel</button>
  </div>
</div>


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}
.popup {
    color: #525252;
    background: #0c2333;
    top: 20%;
    left: 0px;
    right: 0;
    font-size: 14px;
    margin: auto;
    width: 65%;
    height: 600px;
    min-width: 350px;
    max-width: 100%;
    position: absolute;
    padding: 40px 65px;
    z-index: 1000;
}

你可以使用JQuery提供解决方案吗？感谢

Answer 1

您不需要jQuery来操作本地存储。这是一个简单的例子：

$(function() {
  if (localStorage.getItem('popup_accepted')) {
    $('#overlay').remove();
  } else {
    $('#accept').click(function() {
      localStorage.setItem('popup_accepted');
      $('#overlay').remove();
    });

    $('#cancel').click(function() {
      $('#overlay').remove();
    });
  }
});

我无法创建工作代码段，因为我们无权访问代码段中的localStorage。

Answer 2

使用Javascript函数获取和设置cookie

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.45);
            z-index: 999;
            -webkit-animation: fade .6s;
            -moz-animation: fade .6s;
            animation: fade .6s;
            overflow: auto;
        }

        .popup {
            color: #525252;
            background: #0c2333;
            top: 20%;
            left: 0px;
            right: 0;
            font-size: 14px;
            margin: auto;
            width: 65%;
            height: 600px;
            min-width: 350px;
            max-width: 100%;
            position: absolute;
            padding: 40px 65px;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <button id="btn">Open Overlay</button>
    <div id="overlay">
        <div class="popup">
            <div id="popup_terms">
                blablabla
            </div>
            <button id="accept" type="button">accept</button>
            <button id="cancel" type="button">cancel</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script>
        $(function () {
            var storageName = 'rememberMe';
            $('#btn').on('click', function () {
                if (localStorage.getItem(storageName)) {
                    return false;
                } else {
                    $('#overlay').show();
                }
            });

            $('#accept').on('click', function () {
                localStorage.setItem(storageName, true);
                $('#overlay').hide();
            });

            $('#cancel').on('click', function () {
                $('#overlay').hide();
            });
        });
    </script>
</body>

</html>

如何将click事件保存到本地存储以隐藏用户的弹出窗口。他需要点击一次接受。如果他点击取消，弹出窗口应该再次打开

2 个答案: