javascript - 如何向此弹出代码添加一次性功能？

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>