jquery.cookie.jsを使って初回アクセス時のみメッセージを表示します。「閉じる」ボタンでメッセージを消せます。
jquery.cookie.jsのダウンロードは、carhartl/jquery-cookie
参考にしたページは、jquery.cookie.jsの使用方法メモ
デモページの「Cookieを削除する」ボタンでキャッシュを削除することができます。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/main.js"></script>
[main.js]JavaScript
//Cookie
$(function(){
// 1回目のアクセス
if($.cookie("access") == undefined) {
//alert("初回です");
$.cookie("access","onece");
$(".mod_message").css("display","block")
// 2回目以降
} else {
//alert("二回目以降です");
}
});
// Message close
$(function() {
$(".mod_message .close").click(function(){
$(".mod_message").css("display","none")
});
});
HTMl
<div class="mod_message"> <p>初回だけMessageを表示します。</p> <button class="close">閉じる</button> <!-- /.mod_message --></div>
CSS
/* mod_message
-----------------------------------------*/
.mod_message{
display: none;
position: relative;
background: #666;
color: #FFF;
padding: 50px;
/* border-radius */
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.mod_message button{
margin: 0;
position: absolute;
top: 10px;
right: 10px;
}