Question

如果用户选中复选框并单击关闭按钮，则模态将不再显示。我该怎么办？

function popUp() {
  $("#LoadModal").show()

  var modal = document.getElementById('LoadModal')
  var closeBtn = document.getElementsByClassName('closeBtn')[0]
  closeBtn.addEventListener('click', closeModal)
  
  function closeModal() {
    if ($('#checkbox').is(":checked")) {
      /*how to perform not to load again the modal???*/
    } else {
    }
    modal.style.display = 'none'
  }
}

window.onload = popUp

<div id="LoadModal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <p>i want to hide this message by checking the check box below</p>
  </div>
  <div class="modal-footer">
    <input type="checkbox" class="filled-in" id="filled-in-box" />
    <label for="filled-in-box">Don't show again this button</label>
    <a class="closeBtn modal-action modal-close">Continue</a><br><br>
  </div>
</div>

Answer 1

您可以为此使用browser local storage。选中此复选框时，您需要在localStorage中设置一个标志，如果该标志在localStorage中不可用，则显示模式。

本地存储在会话中是持久的，如果您只想为当前会话隐藏模式，请使用sessionStorage

function popUp() {
  var isModalShown = window.localStorage.getItem('loadModalShown')
    if (!isModalShown) {
      $("#LoadModal").show()
    }
  var closeBtn = document.getElementsByClassName('closeBtn')[0]
  closeBtn.addEventListener('click', closeModal)
}

function closeModal() {
  if ($('#checkbox').is(":checked")) {
    window.localStorage.setItem('loadModalShown', true)
  }
  $("#LoadModal").hide()
}
window.onload = popUp

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LoadModal" class="modal modal-fixed-footer">

  <div class="modal-content">
    <p>i want to hide this message by checking the check box below</p>
  </div>

  <div class="modal-footer">
    <input type="checkbox" class="filled-in" id="filled-in-box" />
    <label for="filled-in-box">Don't show again this button</label>
    <a class="closeBtn modal-action modal-close">Continue</a><br><br>
  </div>

</div>

Answer 2

使用更改功能。每当您的复选框更改时，它就会激活。

$('.filled-in').change(function () {
    modal.style.display = 'none'
});

Answer 3

这是一个解决方案，它是Ashish解决方案的改进。它使用window.localStorage，可将键/值对保存在没有到期日期的Web浏览器中。

如果用户将复选框留空，然后单击“继续”，则LoadModal将被隐藏，但随后将再次显示。

另一方面， 如果选中了该复选框 ，并且单击了“继续”，则LoadModal将被隐藏 ，并且不会显示 。

<script type="text/javascript">

    function popUp() {

        var isModalVisible = window.localStorage.getItem('isModalVisible');

        if(isModalVisible == 'true') {
            $("#LoadModal").show();
        } else if(isModalVisible == 'false') {
            $("#LoadModal").hide();
        }

        var closeBtn = document.getElementsByClassName('closeBtn')[0];
        closeBtn.addEventListener('click', closeModal);

    }

    function closeModal() {

        if ($('#filled-in-box').is(":checked")) {
            window.localStorage.setItem('isModalVisible', 'false');
        } else {
            window.localStorage.setItem('isModalVisible', 'true');
        }

        $("#LoadModal").hide();

    }

    window.onload = popUp;

</script>

HTML：

<div id="LoadModal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <p>i want to hide this message by checking the check box below</p>
    </div>
    <div class="modal-footer">
        <input type="checkbox" class="filled-in" id="filled-in-box" />
        <label for="filled-in-box">Don't show again this button</label>
        <a class="closeBtn modal-action modal-close">Continue</a><br><br>
    </div>
</div>

我下面的代码自动加载模态，在模态加载时，我有一个复选框

3 个答案: