是否在基于localstorage cookie上显示弹出窗口一次？

Question

我正在制作一个弹出窗口，我正在尝试显示基于cookie的弹出窗口，它只显示一次当用户第一次访问，也接受和拒绝按钮不工作的更多信息按钮弹出如下当我们点击更多信息新的弹出窗口也来我正在尝试隐藏接受，关闭和所有按钮和设置一个cookie显示这个弹出窗口

我用过这个但不起作用：

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

null

$(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>

null

Answer 1

热门标签

Answer 2

相关问题

Answer 3

使用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()。

默认情况下，弹出容器

也应隐藏:

。 initcookiespopup()将在必要时显示它。

我在window.acceptscookies上使用户选择成为可访问的全局变量，您可以在代码的其他地方使用该变量。