如何在此弹出代码中添加一次函数？

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>

Code to produce a Javascript pop up on page load can be found here

任何帮助将不胜感激。我不是很擅长我如何使它仅在页面加载时出现一次？

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>