时间戳

首页 > 解决方案 > 在基于本地存储 cookie 的不工作上显示一次弹出窗口？

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

问题描述

我正在制作一个弹出窗口，我试图在基于 cookie 的窗口上显示弹出窗口，它仅在用户第一次访问时显示一次，当我们单击更多信息时，接受和拒绝按钮也无法在更多信息按钮弹出窗口上工作，如下所示弹出窗口也来了我试图隐藏接受，关闭和所有按钮并设置一个cookie来显示这个弹出窗口

我用过这个但不工作：

   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>

标签： javascripthtmljquerycookies

解决方案

使用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，您可以在代码的其他地方使用该变量。

推荐阅读