时间戳

首页 > 解决方案 > 我下面的代码自动加载一个模态，在加载的模态我有一个复选框

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

问题描述

如果用户选中复选框并单击关闭按钮，则不得再显示模式。我怎样才能做到这一点？

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>

标签： javascriptjquery

解决方案

为此，您可以使用浏览器本地存储。您需要在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>

推荐阅读