How can I close a pop up modal once button is clicked with cookies?

Question

I am using the plugin js-cookie to create cookies. So, I have a bootstrap modal that pops up after 15 seconds its an email subscription form. What I would like is for the subscribe button to create a cookie that prevents future pop ups. I think my logic may be wrong here. Dev tools shows the cookies but I refresh and the pop up still appears.

<!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content" style="background-color: rgb(255, 241, 237);">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal"    aria-label="Close">
                        <span aria-hidden="true">&#xD7;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel" style="text-align: center;font-size: 60px; font-family: 'Allura', cursive;margin-top: 25px;">
                        Let's be mom friends!
                    </h4>
                    <h6 style="text-align: center; text-transform: uppercase; font-family: raleway;">
                      Subscribe today to receive exclusive MIM content updates directly to your inbox!
                    </h6>
                    <form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post"   target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/CqrSa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                        <p style="font-family: raleway; text-transform: uppercase; margin-top: 20px;">
                            Enter your email address:
                        </p>
                        <p>
                            <input type="text" style="width:250px" name="email"/>
                        </p>
                        <input type="hidden" value="blogspot/CqrSa" name="uri"/>                                    
                        <input type="hidden" name="loc" value="en_US"/>
                        <input type="submit" value="Subscribe" class="btn btn-primary" id="sub-button" style="font-family: raleway; text-transform: uppercase; margin-bottom: 25px;"/>
                    </form>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>
</div>

<script>
setTimeout(function() {
    $('#myModal').modal();
}, 15000);
</script>

....other JS library here....

<!-- Latest js-cookie-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js">      </script>


<script>
  jQuery(document).ready(function($) {  
      $("#sub-button").click(function () {
          Cookies.set('hide-div', true, { expires: 365 });
      });           
  });
</script>

Answer 1

I'd merge the two scripts into one, for example:

$(document).ready(function(){
  if(!Cookies.get('hide-div')){
    setTimeout(function() {
      $('#myModal').modal();
    }, 15000);
  }

  $("#sub-button").click(function () {
      Cookies.set('hide-div', true, { expires: 365 });
  });
});

This way, the modal won't open if the client already has the 'hide-div' cookie set to true.

Answer 2

I think you are just missing the check if there is already a cookie set before calling the setTimeout(...) function. You could try something like this -->

if (!Cookies.get('hide-div')) {
    setTimeout(function() {
        $('#myModal').modal();
    }, 15000);
}

This ensures that the setTimeout will only be executed if the hide-div cookie is set to true.