1回目のアクセス時のみ表示する

注意喚起やローディング、アピールしたいことなど、1回目のアクセス時のみ何かを表示したいときのサンプルです。

サンプルコード

CSS

#bg {
	position: fixed;
	right: 0; 
	bottom: 0;
	z-index: 9999;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	background: #000000;
	opacity: 0.8;
}
#first {
	position: fixed;
	top: 50%; 
	left: 50%;
	z-index: 9999;
	width: 500px;
	height: 200px;
	margin: -100px 0 0 -250px;
	text-align: center;
	background: #ffffff;
}
#first .text {
	margin: 50px 0;
}

#bgが背景要素、#firstが表示内容になります。
必要なHTML要素はjQueryで埋め込んでいます。

JavaScript

var period = 1; // 有効期限日数

$(function() {
	// 1回目のアクセス
	if($.cookie('access') == undefined) {
		// cookie追加
		$.cookie('access', 'on', { expires: period });

		// メッセージの表示
		$('body').append($('<div>').attr('id', 'bg'));
		$('body').append(
			$('<div>').attr('id', 'first')
				.append($('<p>').addClass('text').text('1回目のアクセスのみ注意文言を表示します。'))
				.append($('<a>').attr('href', '#').addClass('brn').text('入場する'))
		);

	// 2回目以降のアクセス
	} else {

	}

	// メッセージの削除
	$(document).on('click', '#first a', function() {
		$('#bg, #first').remove();
		return false;
	});

	// cookieの削除
	$(document).on('click', '#del', function() {
		$.removeCookie('access');
	});
});

1回目のアクセス時のみ表示するデモページ