在基于本地存储 cookie 的不工作上显示一次弹出窗口？

Question

我正在制作一个弹出窗口，我试图在基于 cookie 的情况下显示弹出窗口，它仅在用户第一次访问时显示一次强>，也接受和拒绝按钮在更多信息按钮弹出窗口中不起作用，如下所示，当我们点击更多信息时，新弹出窗口也来了我试图隐藏接受，关闭和所有按钮并设置一个cookie来显示这个弹出p

我用过这个但没用：

   if (localStorage.getItem("cookieSeen") != "shown") {
  $(".popUp").delay(2000).fadeIn();
     localStorage.setItem("cookieSeen","shown")
    };
     $("#submit").click(function() {
     $(".cookie-banner").fadeOut();
  });

$(document).ready(function() {
  $(".footerr li:last-child").on('click', function(e) {
    console.log("in")
    e.preventDefault();

    $('#popUpContain').css('display', 'none');
    $(".serviceMainContent1").css('display', 'block');
  })
  $("#closeInfoBtn").click(function(e) {
    e.preventDefault();
    $('#popUpContain').css('display', 'block');
    $(".serviceMainContent1").css('display', 'none');
  })

  $(".cat_btn").click(function(e) {
    e.preventDefault();
    $(".serv_btn a").css({
      "color": "#303030"
    });
    $(".serv_btn").css({
      "border-bottom": "none"
    });
    $('#services1').css('display', 'none');
    $("#category").css('display', 'block');
    $(".cat_btn a").css({
      "color": "blue"
    });
    $(".cat_btn").css({
      "border-bottom": "2px solid blue"
    });
  });
  $(".serv_btn").click(function(e) {
    e.preventDefault();
    $(".cat_btn a").css({
      "color": "#303030"
    });
    $(".cat_btn").css({
      "border-bottom": "none"
    });
    $("#category").css('display', 'none');
    $('#services1').css('display', 'block');
    $(".serv_btn a").css({
      "color": "blue"
    });
    $(".serv_btn").css({
      "border-bottom": "2px solid blue"
    });
  })


  var acc = document.getElementsByClassName("accordion1");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
})

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.popUp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: block;
  background-color: white;
}

#language {
  width: 57px;
  padding: 4px;
  border: 1px solid #dbdbdb;
}

.header1 {
  display: flex;
  justify-content: flex-end;
}

.container1,
.serviceMainContent1 {
  display: flex;
  flex-direction: column;
  width: 595px;
  padding: 14px;
  box-shadow: -1px 16px 34px 2px #dbdbdb;
  border-radius: 7px;
}

.bodyy h3 {
  color: #303030;
}

.bodyy p {
  line-height: 19px;
  margin-top: 10px;
  font-size: 13px;
}

.footerr>a {
  padding: 7px 90px;
  border-radius: 9px;
  margin: 0px 10px;
}

.footerr>.deny {
  background-color: #ededed;
  color: #303030;
}

.footerr>.accept {
  background-color: #0096FF;
  color: #fff;
}

.footerr>.deny:hover {
  background-color: #f4f2f2;
}

.footerr>.accept:hover {
  background-color: #4eabf7;
}

.footerr>a:hover {
  text-decoration: none;
}

.footerr>p {
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
}

.footerr>ul {
  display: flex;
  list-style: none;
  font-size: 13px;
}

.footerr>ul li {
  padding-right: 10px;
  color: #c4c2c2;
}


/* more information css   */

.serviceMainContent1 {
  height: 654px;
  overflow-y: scroll;
  display: none;
}

.header1 a {
  font-size: 20px;
  width: 40px;
  text-align: center;
}

.header1 a:hover {
  text-decoration: none;
  color: #303030;
}

.categoryServices1 {
  height: 436px;
  width: 563px;
  overflow-y: scroll;
  background-color: #f8f7f7;
}

.cat_serv_btn,
.footerBtn {
  display: flex;
  text-align: center;
}

.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
  width: 50%;
}

.cat_btn,
.serv_btn {
  padding: 10px 0px;
}

.cat_btn:active,
.serv_btn:active {
  border-bottom: 2px solid blue;
}

.cat_btn a:active,
.serv_btn a:active {
  color: blue;
}

.cat_btn a:hover,
.serv_btn a:hover {
  text-decoration: none;
}

.bodyy span {
  padding: 20px 20px 20px 0;
}

.bodyy a,
.bodyy i {
  font-size: 13px;
}

.footerBtn a {
  padding: 5px 0px;
  border-radius: 5px;
  margin: 0px 10px;
  color: #303030;
}

.footerBtn a:hover {
  text-decoration: none;
}

.footerBtn .save,
.footerBtn .deny {
  background-color: #f5f5f5;
}

.footerBtn .save:hover,
.footerBtn .deny:hover {
  background-color: #e7e6e6;
}

.footerBtn .close {
  background-color: #0096FF;
  color: #fff;
}

.footerBtn .close:hover {
  background-color: #4eabf7;
}


/* switch buttons */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider1 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider1:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider1 {
  background-color: #2196F3;
}

input:focus+.slider1 {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider1:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider1.round {
  border-radius: 34px;
}

.slider1.round:before {
  border-radius: 50%;
}


/* accordions */

.accordion1 {
  margin: 20px 0px;
  width: 500px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.accordion1 div p {
  font-size: 13px;
}

.accordion1 {
  display: flex;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion1:hover {
  background-color: #fff;
}

.panel {
  padding: 0px 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  font-size: 13px;
}

#services1 {
  display: none;
}


/* media query for mobile device */

@media only screen and (max-width: 600px) {
  .container {
    width: 400px;
  }
  .footerr>a {
    padding: 5px 40px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popUp">
  <div class="container1" id="popUpContain">
    <div class="header1">
      <img src="img/logo.png" alt="" width="20">
      <div style="margin-right: auto; margin-left: 10px;"><b>BCT-Touristik</b></div>
      <!-- <select name="" id="language">
                        <option value="DE">DE</option>
                        <option value="EN">EN</option>
    
                    </select> -->
    </div>
    <div class="bodyy">
      <h3>We value your privacy</h3>
      <p>We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
        internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
        later by clicking on the settings button on the left lower corner of the page.</p>
    </div><br>
    <div class="footerr">
      <ul>
        <li><i class="fa fa-link" aria-hidden="true"></i> <a href="http://www.testreise.de/die-malireise.de/datenschutz.html">Privacy Policy</a></li>
        <li><i class="fa fa-link" aria-hidden="true"></i> <a href="http://www.testreise.de/die-malireise.de/impressum.html"> Legal Notice</a></li>
        <li><i class="fa fa-cog" aria-hidden="true"></i> <a href="http://www.testreise.de/die-malireise.de/bedingungen.html">Travel Condition</a></li>
        <li><i class="fa fa-cog" aria-hidden="true"></i> <a href="#">More information</a></li>
      </ul><br>
      <a href="" class="deny" id="submit"><b>Deny</b></a>
      <a href="" class="accept" id="submit"><b>Accept and close</b></a>
      <p>Powered by <a href="https://www.bct-touristik.de/index.shtml">BCT-Touristik</a></p>
    </div>
  </div>
  <div class="serviceMainContent1">
    <div class="headerBody">
      <div class="header1">
        <img src="" alt="">
        <select name="" id="language">
          <option value="DE">DE</option>
          <option value="EN">EN</option>
          <option value="PT">PT</option>
        </select>
        <a href="" id="closeInfoBtn">&#10006;</a>
      </div>
      <div class="bodyy">
        <h3>Privacy Settings</h3>
        <p>This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. </p>
        <span><i class="fa fa-link" aria-hidden="true"></i> <a href="">Privacy Policy</a></span>
        <span><i class="fa fa-link" aria-hidden="true"></i> <a href="">Legal Notice</a></span>
      </div>
      <div class="cat_serv_btn">
        <div class="cat_btn">
          <a href=""><b>Categories</b></a>
        </div>
        <div class="serv_btn">
          <a href=""><b>Services</b></a>
        </div>
      </div>
      <div class="categoryServices1">
        <div id="category1">
          <div class="accordion2">
            <div class="accordion1">
              <div>
                <h5>Functional</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
              </div>
              <div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider1 round"></span>
                </label>
              </div>
            </div>

            <div class="panel">
              <hr>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
          <div class="accordion2">
            <div class="accordion1">
              <div>
                <h5>Functional</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
              </div>
              <div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider1 round"></span>
                </label>
              </div>
            </div>
            <div class="panel">
              <hr>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
          <div class="accordion2">
            <div class="accordion1">
              <div>
                <h5>Functional</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
              </div>
              <div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider1 round"></span>
                </label>
              </div>
            </div>

            <div class="panel">
              <hr>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
          <div class="accordion2">
            <div class="accordion1">
              <div>
                <h5>Functional</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
              </div>
              <div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider1 round"></span>
                </label>
              </div>
            </div>
            <div class="panel">
              <hr>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
        </div>
        <div id="services1">
          <div class="accordion2">
            <div class="accordion1">
              <div>
                <h5>Services</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
              </div>
              <div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider1 round"></span>
                </label>
              </div>
            </div>

            <div class="panel">
              <hr>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
          <div class="accordion2">
            <div class="accordion1">
              <div>
                <h5>Services</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
              </div>
              <div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider1 round"></span>
                </label>
              </div>
            </div>
            <div class="panel">
              <hr>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <br>
        <div class="footerBtn">
          <a class="save" href=""><b>Save</b></a>
          <a class="deny" href=""><b>Deny</b></a>
          <a class="close" href=""><b>Accept and close</b></a>
        </div>
        <p>Powered by <a href="">Usercentrics Consent Management</a></p>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

使用js-cookie，您可以创建一个函数来处理此逻辑。

import * as Cookies from 'js-cookie';

function initCookiesPopup() {
  window.acceptsCookies = Cookies.get('acceptsCookies');
  if (window.acceptsCookies != null) {
    // The user has already clicked accept / reject
    $('.popUp').remove();
    return;
  }

  // The user has not accepted or rejected cookies
  $('.popUp').show()
}

function acceptCookies() { closeCookiesAlert(true) }
function rejectCookies() { closeCookiesAlert(true) }

function closeCookiesAlert(accepted) {
  Cookies.set('acceptsCookies', accepted);
  window.acceptsCookies = accepted;
  $('.popUp').remove();
}

// Initialize popup
initCookiesPopup();

您可以从那里调用 acceptCookies() 和 rejectCookies() 在相应按钮的点击处理程序中。

弹出容器<div class="popUp">也应该默认隐藏：<div class="popUp" style="display: none">。 initCookiesPopup() 会在必要时显示它。

我已将用户选择作为window.acceptsCookies 上的全局变量进行访问，您可以在代码的其他地方使用它。