人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

たぶんjavaScriputの質問になるのですが、
サイトを開いたときにポップアップヒントを出したいのですが、

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

よろしくお願いします。

●質問者: snoopy_japan
●カテゴリ:ウェブ制作
✍キーワード:サイト ポップアップ 最初
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ko8820
●18ポイント

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

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

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

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


2 ● ku__ra__ge
●100ポイント ベストアンサー

こんな感じでしょうか。

以下のサンプルの場合ですと、「テスト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>
◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ