Question

我有一个DIV，它在页面加载时显示。可以通过按钮或单击窗口中的任何位置（按照常规模式）将其关闭。

我需要这个DIV在每个会话中只显示一次。目前，每次在网站上加载新页面时都会显示该页面。有简单的解决方案吗？

我想根据下面的工作版本继续使用JQuery show / hide来执行此操作。任何帮助表示赞赏。

HTML

<div id="promoModal" class="promomodal">
  <div class="promo-modal-content">
    <span class="promo-close">&times;</span>
    CONTENT
  </div>

</div>

CSS

  .promomodal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
  }

  .promo-modal-content {
    background-color: #071177;
    margin: 15% auto;
    padding: 10px;
    max-width: 500px;
    text-align: center;
  }

  .promo-close {
    color: #fff;
    float: right;
    top: 0;
    font-size: 28px;
    font-weight: bold;
  }

</style>

JS

var modal = document.getElementById("promoModal");
var span = document.getElementsByClassName("promo-close")[0];

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

    $('.promomodal').show();

    span.onclick = function () {
      jQuery('.promomodal').hide();
    }
    window.onclick = function (event) {
      if (event.target == modal) {
        jQuery('.promomodal').hide();
      }
    }
  });

</script>

Answer 1

var modal = document.getElementById("promoModal");
var span = document.getElementsByClassName("promo-close")[0];

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

   if (sessionStorage.getItem('promomodalWasShown') == null) {
      $('.promomodal').show();
      sessionStorage.setItem('promomodalWasShown', 'true');
   }

    span.onclick = function () {
      jQuery('.promomodal').hide();
    }
    window.onclick = function (event) {
      if (event.target == modal) {
        jQuery('.promomodal').hide();
      }
    }
  });

将Cookie设置为每个会话仅显示一次DIV

1 个答案: