Bootstrap 4: «Не показывать мне снова» на модальном флажке

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);
    }
  })
});