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

スタイルシート?でポップアップを表示させる方法を探しています。

「人力検索」の質問入力フィールドの上にある、
「なんでも探してみますのできいて下さい。?」の「?」の部分をクリックしたら、
操作説明のポップアップが出て、もう1度クリックしたらそれが閉じます。
スタイルシートで実現していると思いますが、これを私も実装したいです。
実装方法をご存知の方教えてください。また解説されているサイトの情報でも構いません。
すみませんが、よろしくお願い致します。

●質問者: zero4
●カテゴリ:インターネット ウェブ制作
✍キーワード:すみません クリック サイト スタイルシート フィールド
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● akkk
●27ポイント

http://www.hajimeteno.ne.jp/dhtml/dist/js14.html

スタイルシートではなく、JavaScriptです。

◎質問者からの返答

JavaScriptでしたか σ(^_^;)

とにかく試してみます(ちょっと難しそう…)ありがとうございます。結果を報告します。


2 ● llusall
●27ポイント

スタイルシートとJavaScriptを使用しています。


簡単に抜き出したサンプルです。

以下、内容を適当なhtmlファイルにして開いてみてください。

<html>

<head>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/prototype.js"></script>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/tooltip.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="http://q.hatena.ne.jp/css/question.css">

</head>

<body>

なんでも探してみますのできいて下さい。

<a href="#" id="input-question">クリック</a>

<div class="tooltip for-input-question" style="display:none">

知りたいことをここに入力してください(最大500文字まで)。</div>


</body>

</html>


スタイルシートとして、question.cssを使用しています。

ポップアップの表示非表示は、tooltip.0.2.js(JavaScript)で主に行っているようです。

特に、Event.observe(window, 'load', Tooltip.initialize, false);

により、イベントを割り当てているようです。


実装方法

prototype.js

tooltip.0.2.js

question.css

の3つを、ブラウザのアドレスバーへアドレスを入力するなどして、ゲットし、

html ファイルと同じフォルダに配置します。

そうすれば、以下のように記述できます。

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript" src="tooltip.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="question.css">

以上、参考になりますでしょうか?

◎質問者からの返答

(;゚Д゚)おぉうお コピペしたらできた!

早速、ファイルをダウンロードしてから、今作っているHTMLに組み込んでみます。

ありがとうございます!!!


3 ● llusall
●26ポイント

再回答すみません。

タグが崩れてしまいました。


<html>

<head>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/prototype.js"></script>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/tooltip.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="http://q.hatena.ne.jp/css/question.css">

</head>

<body>

なんでも探してみますのできいて下さい。

<a href="#" id="input-question">クリック</a>

<div class="tooltip for-input-question" style="display:none">

知りたいことをここに入力してください(最大500文字まで)。</div>


</body>

</html>

◎質問者からの返答

(;゚Д゚)?? 違いが分かりませんが とりあえずありがとう!

関連質問


●質問をもっと探す●



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