how to make a pop up appear only once in html using javascript-CodePudding

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);
}

CodePudding user response：

Use localStorage, it's stored data in browser memory.

For Example:

if(localStorage.getItem('popup') != 'shown'){

//your popup code goes here

// Set localStorage value like below
localStorage.setItem('popup','shown')
}

CodePudding user response：

HTML

<!--(place this inside the popup)-->
<input id="age-input" />

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";
}