ポップアップ
ポップアップといえば、昔は新しいWindowを開くのが主流(だったような気がしています)が最近は色々な方法で実現しているのを目にします。ここではいくつかのポップアップを試してみたいと思います。
新規ウインドウ window.open
サンプル
<a href="javascript:;" onclick="window.open('http://foo.bar.com/file.html', 'winName', '
left=0,
top=0,
width=100,
height=100,
status=0,
scrollbars=0,
menubar=0,
location=0,
toolbar=0,
resizable=0'
);">click me!</a>
* 実際は一行で書く。
パラメータの意味は、left=横座標, top=縦座標, width=窓の幅, height=窓の高さ, status=ステータスバーの有無, scrollbars=スクロールバーの有無, menubar=メニューバーの有無, location=アドレスバーの有無, toolbar=ツールバーの有無, resizable=窓のサイズ変更となっていて、有:1 無:0 を表す
ポイント
アンカーのonclickで動作をさせる時に、hrefに何を書いたらよいのかというのを昔考えたことがあります。ここでは、href="javascript:;"としていますが、href="#"や、そもそもhref="javascript:onclickで書く内容"としてしまうのもあると思いますが、ほんとはどれがいいんでしょうかね？
display: none; を使ったポップアップ
サンプル
<a href="javascript:;" onclick="document.getElementById('hide1').style.display='block';">click me!</a>
<div id="hide1" style="display: none">
隠し文字
</div>
リンクをクリックすると文字が現れます。
click me!ちょっとアレンジをして、
<div id="default-open">
<a href="javascript:;" onclick="document.getElementById('default-close').style.display='block';
document.getElementById('default-open').style.display='none';">[+]</a>open !
</div>
<div id="default-close" style="display: none;">
<a href="javascript:;" onclick="document.getElementById('default-open').style.display='block';
document.getElementById('default-close').style.display='none';">[-]</a>close !
<div style="width: 100px; height: 30px; border: 1px solid red;">
隠し文字
</div>
</div>
閉じたり開いたりします。(結構こういうのみますよね。)
ポイント
display: none;とdisplay: block;(inlineなど他の要素でも良い)をJavaScriptで切り替えるだけです。ここでは、文字が表示されるだけですが、<ul>タグでリストや、<img>タグで画像を消したり出したりすると、結構見た目がweb2.0です。
あとどうでもいいことなんですが、実際はサンプルとは違って"隠し文字"の部分が
<table summary="文字のセンタリングの為にtableを用いています。" style="height:100%; width:100%;">
<tr><td align="center" valign="middle">
隠し文字
</td></tr>
</table>
となっています。これは、縦方向の真ん中に文字を配置する方法がスタイルシートではどうしたら良いかわからなかったので、tableのtdにvalign="middle"を指定して実現する為です。たぶん何かしら方法があるんだろうけど、まぁこの解はあとまわし。
吹き出し
まずは吹き出しを作ります。吹き出しは角丸ブロックに
この画像をプラスすることで作ります。
吹き出し部分。角丸ブロックを作ったときはtableタグでつくりましたが、今度はdivタグを駆使してつくります。
<div id="comment" style="display: none; height: 156px;">
<div style="position: absolute; top: 0; left: 0;
background-image: url('img/upper_left.gif'); width: 12px; height: 12px;"> </div>
<div style="position: absolute; top: 0; left: 12px;
background-color: #eeeecc; width: 200px; height: 12px;"> </div>
<div style="position: absolute; top: 0; left: 212px;
background-image: url('img/upper_right.gif'); width: 12px; height: 12px;"> </div>
<div style="position: absolute; top: 12px; left: 0;
background-color: #eeeecc; width: 224px; height: 100px;">吹き出し</div>
<div style="position: absolute; top: 112px; left: 0;
background-image: url('img/lower_left.gif'); width: 12px; height: 12px;"> </div>
<div style="position: absolute; top: 112px; left: 12px;
background-color: #eeeecc; width: 200px; height: 12px;"> </div>
<div style="position: absolute; top: 112px; left: 212px;
background-image: url('img/lower_right.gif'); width: 12px; height: 12px;"> </div>
<div style="position: absolute; top: 124px; left: 20px;
background-image: url('img/triangle.gif'); width: 64px; height: 32px;"> </div>
</div>
このままだとこのページの上のほうに表示されるだけなので、style="display: none"で消しておきます。
これで準備が整ったので今までやってきたように、display: none; -> display: block;にすることで吹き出したいと思います。今回はさらに、位置の指定がポイントです。
サンプル
function popup(obj, id) {
var elm = document.getElementById(id);
elm.style.display='block';
elm.style.position='absolute';
/* 吹き出しの横軸を設定 */
elm.style.left = obj.offsetLeft + "px";
/* 吹き出しの縦軸を設定, 吹き出し自体の高さを引いて設定 */
elm.style.top = (obj.offsetTop - elm.style.height.substring(0,elm.style.height.length-2)) + "px";
}
function popdown(id) {
document.getElementById(id).style.display='none';
}
...
...
<a href="javascript:;" onmouseover="popup(this, 'comment')"
onmouseout="popdown('comment')">吹き出しを表示!</a>
ポイント
offsetLeft, offsetTopでエレメントの座標を取得しつつ、吹き出し自体の高さも考慮して、styleをセットするところがポイントです。吹き出しを作ること自体が面倒なので、色々なライブラリを探してみるのもよいかもしれません。
Yahoo! User Interface Library (YUI) を使ってやってみる
下の４つがポップアップとして参考になると思います。ライブラリなので簡単に使えます。