jquery - Bootstrap 4 : "Don' t show me again"on a modal checkbox

Question

我有一个带有复选框的模式，上面写着“不要再显示我”。 当我单击该复选框然后按下“关闭”按钮时，我希望我的模式“永远”消失。

我正在使用 jquery-cookie，但我不明白为什么它不起作用。

当我选中复选框并按下“关闭”按钮并重新加载页面时，模态将卷土重来..

这是我的代码:https://codepen.io/anon/pen/WBPLEK

这只是 JS 部分:

jQuery(document).ready(function($) {

    if ($.cookie('cacher-modal')) {
        $("#popupMaintenanceModal").remove();
    }
    else {
        $('#popupMaintenanceModal').modal('show');
    }

    if ($('#popupMaintenanceCheckbox').is(':checked')) {
        $(".btn-maintenance").click(function () {
            $("#popupMaintenanceModal").remove();
            $.cookie('cacher-modal', true);
        });
    }
});

Answer 1

当窗口复选框被点击时，你并没有设置你的 cookie。相反，您需要向您的复选框添加一个点击事件监听器，然后检查它是否被选中/未选中并设置适当的 cookie。此外，要隐藏模式，您可以使用:

$("#popupMaintenanceModal").modal("hide");

正确关闭模态。

jQuery(document).ready(function($) {
  if ($.cookie("cacher-modal")) {
    $("#popupMaintenanceModal").remove();
  } else {
    $("#popupMaintenanceModal").modal("show");
  }

  $("#popupMaintenanceCheckbox").click(function() {
    if ($(this).is(":checked")) {
        $("#popupMaintenanceModal").modal("hide");
        $.cookie("cacher-modal", true);
    } else {
      $.cookie("cacher-modal", false);
    }
  })
});