Установить cookie, чтобы показывать DIV только один раз за сеанс - PullRequest
0 голосов
/ 03 июля 2019

У меня есть 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>

1 Ответ

1 голос
/ 03 июля 2019
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();
      }
    }
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...