Как добавить однократную функцию в этот всплывающий код?

Question

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

$(function(){
  var overlay = $('<div id="overlay"></div>');
  overlay.show();
  overlay.appendTo(document.body);
  $('.popup').show();
  $('.close').click(function(){
  $('.popup').hide();
  overlay.appendTo(document.body).remove();
  return false;
});

$('.x').click(function(){
  $('.popup').hide();
  overlay.appendTo(document.body).remove();
  return false;
});
});

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  z-index: 100;
  display: none;
}
.cnt223 a{
  text-decoration: none;
}
.popup{
  width: 100%;
  margin: 0 auto;
  display: none;
  position: fixed;
  z-index: 101;
}
.cnt223{
  min-width: 600px;
  width: 600px;
  min-height: 150px;
  margin: 100px auto;
  background: #f3f3f3;
  position: relative;
  z-index: 103;
  padding: 15px 35px;
  border-radius: 5px;
  box-shadow: 0 2px 5px #000;
}
.cnt223 p{
  clear: both;
  color: #555555;
  font-size: 20px;
  font-family: sans-serif;
}
.cnt223 p a{
  color: #d91900;
  font-weight: bold;
}
.cnt223 .x{
  float: right;
  height: 35px;
  left: 22px;
  position: relative;
  top: -25px;
  width: 34px;
}
.cnt223 .x:hover{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='popup'>
  <div class='cnt223'>
    <h1>Important Notice</h1>
    <p>
    We were affected by the fire next door and will remain closed until further notice.
    <br/>
    <br/>
    <a href='' class='close'>Close</a>
    </p>
  </div>
</div>

Код для создания всплывающего окна Javascript при загрузке страницы можно найти здесь

Любая помощь будетс благодарностью.Я не очень хорош в этом.Как сделать так, чтобы это появлялось только один раз при загрузке страницы?

Answer 1

Не уверен, что я полностью понимаю, что вы подразумеваете под модальностью, появляющейся только один раз при загрузке страницы.Вы хотите, чтобы модал появлялся только при первой загрузке страницы и не появлялся при любой последующей перезагрузке страницы?Если это так, то вы можете достичь этого, используя localStorage следующим образом

<script type='text/javascript'>
    $(function () {
        if (!localStorage['show-popup']) {
            var overlay = $('<div id="overlay"></div>');
            overlay.show();
            overlay.appendTo(document.body);

            $('.popup').show();
            $('.close').click(function () {
                $('.popup').hide();
                overlay.appendTo(document.body).remove();
                return false;
            });

            $('.x').click(function () {
                $('.popup').hide();
                overlay.appendTo(document.body).remove();
                return false;
            });
            localStorage['show-popup'] = disable
        }
    });
</script>