Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
jquery.cookieを使って初回だけメッセージを表示する - CodingMania

2015/10/5

jquery.cookieを使って初回だけメッセージを表示する

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;
}