简体   繁体   中英

How to hide a div with a cookie

Hey guys I am currently creating a newsletter popup. I'm wanting to hide the div after the close button is selected using a cookie. The code snippet I've taken does include some code to try and achieve this but doesn't seem to work for me. Anyone know a solution?

JS

var delay = 0; //in milliseconds

jQuery(document).ready(function($){
    setTimeout(function(){
        showNewsletterPopup();
    }, delay);

    jQuery('.popup-close').click(function(){
        $('.newsletter-overlay').hide();
    });
});

function showNewsletterPopup(){
    jQuery('.newsletter-overlay').show();
}

function onLoad() {
    var showDiv;
    if(localStorage.getItem("showDiv") == null) {
        showDiv = true;
    }
    else {
        showDiv = localStorage.getItem("showDiv")
    }

    if (showDiv) {
         document.getElementById('newsletter-overlay').style.display = 'block';
    }
    else {
        document.getElementById('newsletter-overlay').hide();
    }
}

function onClose() {
    document.getElementById('newsletter-overlay').remove();
    localStorage.setItem("showDiv", false);
}

HTML

<div  class="newsletter-overlay">

 <div id="newsletter-popup">
   <a href="#" class="popup-close"><img src="/wp-content/uploads/static/TLTX.svg"></a>

  <div class="col1">
   <div class="newsletter-in">
     <h3>Take 10% off your first purchase</h3>
     <p class="modalp">Join our Tribe! Our mates get the best rates. Every $1 spent will earn you 1 point. Be the first to know about new arrivals. Receive 10% off your first order! See more on our <a href="https://ellazafran.com/tribe/">Tribe</a> page
     [wc_reg_form_bbloomer]
          </div>
      </div>
        </form>
   </div>
 </div>
  </div>

the provided code is a bit messy... there are some unused functions and a lot of noise. however, here is my proposal:

$(document).ready(function($) {
    const $newsletterPopup = $('#newsletter-popup');
    const $newsletterOverlay = $('.newsletter-overlay');
    const $popupCloseLink = $('.popup-close');

    let showDiv = JSON.parse(localStorage.getItem("showDiv"));

    if (showDiv === null) {
        showDiv = true;
    }

    if (showDiv) {
        $newsletterOverlay.show();
        $newsletterPopup.show();
    } else {
        $newsletterOverlay.hide();
        $newsletterPopup.hide();
    }

    $popupCloseLink.click(function() {
        $newsletterOverlay.hide();
        $newsletterPopup.hide();
        localStorage.setItem("showDiv", false);
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM