たぶんjavaScriputの質問になるのですが、

サイトを開いたときにポップアップヒントを出したいのですが、

そのサイトのページからはいっても最初のページで一回だけだしたいのですが、
どうやればいいのでしょうか。

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/20 23:19:00
  • 終了:2010/12/22 02:04:45

ベストアンサー

id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402010/12/22 00:39:11

ポイント100pt

こんな感じでしょうか。

以下のサンプルの場合ですと、「テスト2行目」の行に最初にページを開いたときだけポップアップヒントを表示します。

<html>
<head>
<!-- jQueryの読み込み -->
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery","1");</script>

<!-- 最初に表示したときだけ、ポップアップヒントを出す -->
<script>
$(function(){
	$('.FirstBalloon').each(function(){
		if (!document.cookie.indexOf('first')) return;

		$('body').append('<p class="balloon" style="display:none">'+$(this).attr("balloonText")+'</p>');
		$("p:last", $('body'))
			.css("border", "solid 1px red")
			.css("background-color", "white")
			.css("position", "absolute")
			.css("top" , ($(this).offset().top -$(this).height()*1.7)+"px")
			.css("left", ($(this).offset().left+$(this).width() /2.0)+"px")
			.slideDown();
	});

	WriteCookie("first", 1, 9999);
});
function WriteCookie(key, value, days) {
	var str = key + "=" + escape(value) + ";";
	if (days != 0) {
		var dt = new Date();
		dt.setDate(dt.getDate() + days);
		str += "expires=" + dt.toGMTString() + ";";
	}
	document.cookie = str;
}
</script>

<!-- (テスト用)再び初回表示を行うための処理 -->
<script>
$(function(){
	$("#deleteCookie").click(function(){ DeleteCookie("first"); });
});
function DeleteCookie(key)
{
     document.cookie = key + "=;expires=" + (new Date()).toGMTString();
}
</script>
</head>
<body>

テスト1行目<br><br>

<span class="FirstBalloon" balloonText="ポップアップヒント2">テスト2行目</span><br><br>

テスト3行目<br><br>

<div>
このボタンを押してから再読み込みすると、再び初回表示がされます。<br>
<input type="button" id="deleteCookie" value="初回表示リセット">
</div>

</body>
</html>
id:snoopy_japan

ありがとうございます、まさにこういったのを求めていました。

大変丁寧に書かれていて嬉しく思います。

さっさく使ってみようと思います。

重ねてありがとうございます。

2010/12/22 02:03:47

その他の回答(1件)

id:ko8820 No.1

ko8820回答回数1221ベストアンサー獲得回数692010/12/21 00:53:15

ポイント18pt

http://www.kanaya440.com/contents/tips/javascript/010.html

これを改造すれば可能です。

サンプル例では、ポップアップがすでに開いていた場合は、今あるポップアップを閉じて

再度開ける方法で実現してます。

id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402010/12/22 00:39:11ここでベストアンサー

ポイント100pt

こんな感じでしょうか。

以下のサンプルの場合ですと、「テスト2行目」の行に最初にページを開いたときだけポップアップヒントを表示します。

<html>
<head>
<!-- jQueryの読み込み -->
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery","1");</script>

<!-- 最初に表示したときだけ、ポップアップヒントを出す -->
<script>
$(function(){
	$('.FirstBalloon').each(function(){
		if (!document.cookie.indexOf('first')) return;

		$('body').append('<p class="balloon" style="display:none">'+$(this).attr("balloonText")+'</p>');
		$("p:last", $('body'))
			.css("border", "solid 1px red")
			.css("background-color", "white")
			.css("position", "absolute")
			.css("top" , ($(this).offset().top -$(this).height()*1.7)+"px")
			.css("left", ($(this).offset().left+$(this).width() /2.0)+"px")
			.slideDown();
	});

	WriteCookie("first", 1, 9999);
});
function WriteCookie(key, value, days) {
	var str = key + "=" + escape(value) + ";";
	if (days != 0) {
		var dt = new Date();
		dt.setDate(dt.getDate() + days);
		str += "expires=" + dt.toGMTString() + ";";
	}
	document.cookie = str;
}
</script>

<!-- (テスト用)再び初回表示を行うための処理 -->
<script>
$(function(){
	$("#deleteCookie").click(function(){ DeleteCookie("first"); });
});
function DeleteCookie(key)
{
     document.cookie = key + "=;expires=" + (new Date()).toGMTString();
}
</script>
</head>
<body>

テスト1行目<br><br>

<span class="FirstBalloon" balloonText="ポップアップヒント2">テスト2行目</span><br><br>

テスト3行目<br><br>

<div>
このボタンを押してから再読み込みすると、再び初回表示がされます。<br>
<input type="button" id="deleteCookie" value="初回表示リセット">
</div>

</body>
</html>
id:snoopy_japan

ありがとうございます、まさにこういったのを求めていました。

大変丁寧に書かれていて嬉しく思います。

さっさく使ってみようと思います。

重ねてありがとうございます。

2010/12/22 02:03:47
  • id:Cherenkov
    もうちょっと具体的にいったほうが回答の質が高まりますよ。
    tooltip jqueryとかで検索して気に入ったのを導入してみるとか。
    単純にアラートなら(アドレス欄にコピペしてエンターキー)
    javascript:alert("ヒント")

    以下適当な物をピックアップ。
    http://www.designwalker.com/2008/01/lightbox.html
    http://highslide.com/#examples
    jQuery UI - Dialog Demos & Documentation http://jqueryui.com/demos/dialog/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません