サイト制作に関するメモ書き

HOME > JavaScript > jQuery > 1回目のアクセス時のみ表示する

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回目のアクセス時のみ表示するデモページ
 

“1回目のアクセス時のみ表示する” への2件のフィードバック

  1. 宮村伊澄 より:

    いつも大変参考にさせていただいております。
    1回目のアクセス時のみに表示される「1回目のアクセスのみ注意文言を表示します。」の文章の下に画像を追加したい場合は、どのような記述になるでしょうか?
    また、改行を使った文章の追加は「\n」ではできないのでしょうか?
    初歩的な質問で大変申し訳ないですが、教えていただけますと幸いです。

    • cly7796.net より:

      宮村伊澄さん
      コメントありがとうございます。

      画像を追加したパターンを作ってみましたが、こちらで問題ないでしょうか。
      http://cly7796.net/wp/sample/only-the-first-display/index2.html
      sample2.jsの12行目で追加する画像の設定を行い、16行目で追加しています。

      また、改行を使った文章の追加は「\n」ではできないのでしょうか?

      「1回目のアクセスのみ~」の文言に改行を追加しましたが、改行については<br>タグを追加することで行えます。
      ただtext()だとHTMLタグが使えないので、テキスト追加部分をhtml()に変更しています。(sample2.jsの15行目)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP