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>

可以在此处找到在页面加载时生成 Javascript 弹出窗口的代码

任何帮助将不胜感激。我不太擅长这个。我怎样才能让它在页面加载时只出现一次？

标签： javascriptpopup

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>