javascript - 单击带有 cookie 的按钮后，如何关闭弹出模式？

Question

我正在使用插件 js-cookie 来创建 cookie。所以，我有一个 Bootstrap 模式，它在 15 秒后弹出一个电子邮件订阅表单。我想要的是为订阅按钮创建一个 cookie，以防止将来弹出窗口。我想我的逻辑在这里可能是错误的。开发工具显示 cookie，但我刷新，弹出窗口仍然出现。

<!-- 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>

....这里有其他 JS 库....

<!-- 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

我会将这两个脚本合并为一个，例如:

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

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

这样，如果客户端已经将“hide-div”cookie 设置为 true，则模态框不会打开。