Question

我将此代码用于博客上的欢迎页面。但是当我点击任何页面时，首先会显示此欢迎屏幕。我需要在每个用户首次登录我的页面时只显示一次。

<code>
  <div id="first_p" style="text-align: center; margin-top: 5px;">
    <a onclick="document.getElementById('main_p').style.display = 'block';document.getElementById('first_p').style.display = 'none';" href="#">
      <img src="www.test.jpg" border="0">
    </a>
  </div>
  <div id="main_p" style="display: none;">
</code>

如何在每次登录时只显示一次？

Answer 1

如果它类似于加载屏幕，请使用具有绝对位置的遮罩div。使用cookie确保在刷新页面时不显示它。

$(function () {
  if(typeof(Storage) !== "undefined") {
    if (localStorage.getItem("visited") == null) {
      $("a").click(function () {
        $("#mask").fadeOut();
      });
    }
    else
      $("#mask").hide();  
  } else {
    $("a").click(function () {
      $("#mask").fadeOut();
    });
  }
  localStorage.setItem("visited", true);
});

* {font-family: 'Segoe UI'; padding: 0; margin: 0; list-style: none; text-decoration: none;}
#mask {position: fixed; background-color: rgba(0,0,0,0.75); left: 0; top: 0; bottom: 0; right: 0; z-index: 99;}
#mask .message {position: absolute; height: 60px; background-color: #fff; width: 50%; left: 25%; top: 50%; margin-top: -30px; text-align: center; border-radius: 20px;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="mask">
  <div class="message">
    <h2>Welcome to My Site</h2>
    <p><a href="#">Click here</a> to proceed.</p>
  </div>
</div>

小提琴：http://jsbin.com/cowezugipu/edit?output

该消息只出现一次。

如何为博客创建欢迎页面

1 个答案: