Closing Auto Opening Modal and Browser Remembering

Highlighted
Shopify Partner
1 0 0

Hi everyone. I have been working on an auto opening modal. I am using Javascript to open the modal on page load as this needs to appear on every page of the website. It is an age verification pop up. I know there are apps out there but I wanted to use this as a learning experience.

 

My question is when the button is clicked, I need the modal to disappear and when the user visits other pages of the website I do not want this modal to auto load again. I have been told I could use localStorage to achieve this but I don't think that is possible with Shopify, I have been trying for days to try and get it to work.

 

If you have any suggestions I'd be grateful. The code is as follows:

 

  $("#myModal").modal("show");
  
  $("#myModal").on('hide.bs.modal', function(){
    localStorage.setItem('age-verified', true);
  });

<!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a href="https://google.co.uk" class="close" role="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></a>
        <img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/img1.png?v=1550053751" alt="">
      </div>
      <div class="modal-body">
        <p class="modal-p">You must be at least 18 years old to enter this site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" id="over18" class="btn btn-default" data-dismiss="modal">I am 18 or older</button>
        <a href="https://google.co.uk" id="under18" class="btn btn-danger" role="button">I am under 18</a>
      </div>
    </div>
  </div>
</div>
0 Likes