Как сделать страницу приветствия для блога

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>

Fiddle: http://jsbin.com/cowezugipu/edit?output

появляется сообщение только один раз.