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.