How to not show popup again (with existing library)

Question

I am working on a shopify theme. It has it's own popup settings. I built a new popup for my website it is asking people to choose language when they visit the website. Until here everything is fine but when the visitor chooses language everytime the page loads they see the popup. There is a checkbox to turn it of but how can I also disable popup when they choose the language?

Checkbox which is working fine;

<div class="newsletter--showAgain">
   <input id="dismiss" class="do-not-show-again" type="checkbox" name="dismiss">
   <label for="dismiss">{{ 'general.newsletter_form.dismiss' | t }}</label>
</div>

button that will close the popup when the visitor clicks;

 <button type="button" class="selector-button" href="website">
</button>

I tried to put "id" and "name" inside of the button but it did not work.

ps: js file is too large to show here for close popup.

Answer 1

unfortunately you will have to stored the state of the checkbox to be able to retrieve it and don't show again the popup

if you want to stored this state on client side, one way can be to used localstorage

localStorage.setItem('popup-already-show', $('#dismiss').checked);

and in the begining of your function that open the popup check if popup already displayed

function openPopup() {
 if (!localStorage.getItem('popup-already-show') {
  //your code to open the popup
 }
}