i have my age verification pop up i want to appear only once when the site is visited and the pop up keeps appearing each item i refresh my browser, how do i go about it? answer will be much appreciated.
if (document.getElementById("newsletter-popup-form")) {
setTimeout(function () {
var mpInstance = $.magnificPopup.instance;
if (mpInstance.isOpen) {
mpInstance.close();
}
setTimeout(function () {
$.magnificPopup.open({
items: {
src: "#newsletter-popup-form",
},
type: "inline",
removalDelay: 350,
callbacks: {
open: function () {
$("body").css("overflow-x", "visible");
$(".sticky-header.fixed").css("padding-right", "1.7rem");
},
close: function () {
$("body").css("overflow-x", "hidden");
$(".sticky-header.fixed").css("padding-right", "0");
},
},
});
}, 500);
}, 100);
}
HTML
<!--(place this inside the popup)-->
<input id="age-input" />
JS
const popup = document.getElementById("newsletter-popup-form")
const ageInput = document.getElementById("age-input")
ageInput.addEventListener(change, (e) => {
localStorage['userAge'] = ageInput.value;
}
if if (localStorage.getItem("userAge") === null) { {
// shows the popup on refresh so long as variable is not found
popup.style.display="block";
//insert any additional code here...
} else {
// hides the popup
popup.style.display="none";
}