Помогите доработать всплывающее окно. Нужны куки

[apelisin]

Всем привет. Давно я не заходил на форум - работа, смена образа жизни и так далее.

У меня возникла проблема с всплывающим окном. Всё работает и прекрасно. Но никак не получпется прикрутить к нему куки, что бы окно не всплывало каждый раз при обновлении странички.

Выложу весь код всплывающего окна. Буду крайне благодарен за помощь.

Как вариант прикрутить куки можно к кнопке закрытия самого окна. Но никак не получается у меня.

Установка всплывающего окна на DLE любой версии.

Открываем папку с вашим шаблоном сайта и находим в нём файл main.tpl и вставляем в удобное место код

PHP код:

<div id="parent_popup">
  <div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
    <p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
    <p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</div>
</div> 


Сюда же в main.tpl перер тегом </body> вставляем скрипт таймера задержки появления всплывающего окна

PHP код:

<script type="text/javascript">
    var delay_popup = 5000;
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script> 


Открываем файл стилей вашего шаблона и в самый конец добавляем

PHP код:

#parent_popup {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
#popup {
  background: #fff;
  width: 520px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border: 10px solid #ddd;
  position: relative;
  /*--CSS3 Тени для Блока--*/
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  /*--CSS3 Скругленные углы--*/
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
 
.close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background-color: rgba(0, 122, 200, 0.8);
}