Установите cookie для отображения всплывающего модального окна без вызова каких-либо библиотек JavaScript - только собственный JavaScript / DOM API

Question

Я бы хотел, чтобы впервые посетители моего сайта увидели всплывающее окно приветствия, которое отображается не чаще одного раза в год, если только они не удаляют свои данные для просмотра.

Ради производительности (а также обучение), я не хочу вызывать какие-либо внешние библиотеки JavaScript.

Мой код ниже устанавливает cookie с датой истечения срока действия и логическим значением для того, посетил ли пользователь ранее значение true, а затем вызывает этот cookie, чтобы скрыть модальный div, если значение уже истинно.

Я был бы благодарен, если бы сообщество помогло мне понять проблему с моим JavaScript.Прежде всего, Jsfiddle запускает его не так, как в локальной версии, хотя код тот же, и я совершенно не понимаю, почему.

<script type="text/javascript">

// set a cookie on the load event, which expires after a year

window.onload = function() {
  var expiryTime = new Date();
  expiryTime.setFullYear(expiryTime.getFullYear() + 1);
document.cookie = "visited=true; expires=" + expiryTime.toUTCString() + ";";
}

// function to hide the modal div

function hideModal() {
  document.getElementById("modal").style.display = "none";
}

// read the cookie and hide the modal div if the value of visitedKey is true

function inspectCookie() {
  var visitedKey = "visited=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(visitedKey) == true) {
      hideModal()
    }
  }
}

// run the cookie checking function as soon as the parser hits it - rather than waiting for the whole page to render then hiding the modal div

inspectCookie();

</script>

<style type="text/css">

#modal,
h3 {
  display: block;
  position: absolute;
}

#modal {
  z-index: 1;
  width: 60%;
  padding: 5%;
  background-color: #aaa;
  color: #644;
}

h3 {
  z-index: 0;
}

</style>

<div id="modal">

  <h1>
     Welcome!
  </h1>

  <p>
    This is a modal pop up which should only appear on the user's first visit!  
  </p>

  <a href="#" onclick="hideModal()">close</a>

</div>

<h3>This is the content of the page.</h3>

jsfiddle, с которым я работал, находится здесь: http://jsfiddle.net/zLbcwpdv/34/

Answer 1

Рабочая скрипка

// set a cookie on the load event, which expires after a year

window.onload = function() {
  var expiryTime = new Date();
  expiryTime.setFullYear(expiryTime.getFullYear() + 1);
  document.cookie = "visited=true; expires=" + expiryTime.toUTCString() + ";";
  console.log(document.cookie);
}

// function to hide the modal div

window.hideModal = function () {
  document.getElementById("modal").style.display = "none";
}

// read the cookie and hide the modal div if the value of visitedKey is true

function inspectCookie() {
  var visitedKey = "visited";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(visitedKey) !== -1) {
      window.hideModal()
    }
  }
}

// run the cookie checking function as soon as the parser hits it - rather than waiting for the whole page to render then hiding the modal div

inspectCookie();

Проблемы

1. Ваш ключ был visited=, а ключ должен бытьvisited;

2. indexOf () возвращает индекс найденного значения, а -1, если значение не было найдено, не возвращает логическое значение, поэтому проверьте, если онобыл найден, вам нужно сравнить его с -1 (-1, если не найдено, другое число найдено).

3. Вы установили свой cookie на событие onload, но в скрипте выпереопределить функцию загрузки после загрузка уже была запущена, поэтому заданная вами функция загрузки не выполнялась, потому что событие загрузки уже запущено до того, как вы переопределите функцию загрузки.

Вы должны действительно узнать больше о событиях и функциях JS, которые вы используете.