ゴミ箱.net

汚物は消毒

JavaScriptでポップアップを表示する

JavaScriptを使ってウェブサイト上にポップアップを表示する方法。

ただし、別ウィンドウを開いたり、alert()を使ってダイアログを表示したりするのではなく、ページ上に表示するようにする。また、カーソルを合わせたら表示する本当のポップアップではなく、要素をクリックすると表示され、もう一度クリックすると閉じるようにする。

ここをくりっくしてくだちい

リンクにカーソルを合わせるとテキストがポップアップされる機能があるが、それとは別物である。
こちらはJavaScriptによって動的にページを書き換えている。

上のリンクの要素aは以下のように書かれている。(分かりやすいように改行してある。ブログに貼り付けるときは、<br />が勝手に挿入されるのを防ぐために1行で書いてある。)

<a href="#" onclick="var popup = document.getElementById('popup');
if (popup == null) {
popup = document.createElement('div');
document.body.appendChild(popup);
popup.id = 'popup';
popup.style.position = 'absolute';
popup.style.textAlign='left';
popup.style.backgroundColor = '#ffff99';
popup.style.color = '#000000';
popup.innerHTML = '         /⌒ヽ <br />
  ⊂二二二( ^ω^)二⊃ <br />
        |    /       ブーン <br />
         ( ヽノ <br />
         ノ>ノ  <br />
     三  レレ ';
popup.onclick = function(event){
document.body.removeChild(this);
};
}
popup.style.left = document.documentElement.scrollLeft + event.clientX + 'px';
popup.style.top = document.documentElement.scrollTop + event.clientY + 'px';
return false; ">


このタグを上から順に解説していく。

属性hrefに指定した「#」はただのダミー。JavaScriptを起動させたいだけなのでURLを指定する必要はない。ダミーとしては「javascript:void(0)」も人気だ。どちらも、どこにも遷移しない点では同じ。

属性onclickに、クリックされたときのイベントハンドラをJavaScriptによって記述している。ここが肝心。
1行目の
var popup = document.getElementById('popup');
において、popupというIDがつけられたタグが存在するかどうかを確認している。popupというIDは、ポップアップの要素につける予定のIDである。この処理は、すでにポップアップが作られている場合に二重にポップアップを作成しないために入れている。

if (popup == null)
の条件文で、まだpopupというIDがついたタグがない=ポップアップが作られていない場合に、新しくポップアップを作成する処理を書いている。

popup = document.createElement('div');
によって、要素divを新規に作成する。これがポップアップを表示するための要素となる。
document.body.appendChild(popup);
によって作成した要素をHTMLの要素bodyの末尾に追加する。

popup.id = 'popup';
によって、要素にIDをつける。IDはドキュメント中で一意に要素を指定するために必要である。今回は二重表示を防ぐためにIDを使っている。

popup.style.position = 'absolute';
は、要素の表示位置の指定方法を、親要素(今回は要素body)を基準とした絶対位置指定にすることを指定している。

popup.style.textAlign='left';
popup.style.backgroundColor = '#ffff99';
popup.style.color = '#000000';
において、テキストの配置、背景色、文字色を指定する。

popup.innerHTML = (ry
によって、要素に表示するHTMLを指定している。ここは好きな文字列にしておk。ただしinnerHTMLの代わりにinnerTextを使うとFireFoxで使えないよ。

popup.onclick = function(event){
document.body.removeChild(this);
};
これは、要素がクリックされたときに自身を要素bodyから削除し、表示が消えるようなイベントハンドラを指定している。

popup.style.left = document.documentElement.scrollLeft + event.clientX + 'px';
popup.style.top = document.documentElement.scrollTop + event.clientY + 'px';
によって、要素をクリックした位置に表示させる。
'px'をつけているのは、JavaScriptの動作がDOCTYPE宣言によって変わることがあるからだ。
DOCTYPE宣言が、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">だと、left、topの単位にpxをつけないと正常に動作しない。
document.documentElement.scrollLeft + event.clientXとかの意味については、下で詳しく説明する。

最後に
return false;
によって、クリックしてもリンク先に遷移しないことをブラウザに指示する。hrefにダミーを指定しているとはいえ、これがないとクリックするたびに画面のスクロールがリセットされて見苦しいことになる。


クリックした座標の取得について


クリックした座標は、基本的にはイベントのインスタンスのメンバ変数として得ることができる。
ところが困ったことに、その座標の取り方がブラウザによってまったく仕様が異なっているのだ。頭おかしいんじゃねーか?ブラウザがこの世に1種類しかなければ楽なんだが。

第五章 クライアントサイドの技術:マウスの座標を取得するによると、どのブラウザでも問題なく使えるのはscreenX、screenYだけらしい。
これはデスクトップの画面上の座標を返すものであるが、今回ほしいのはブラウザに表示されたページ上の座標なのだ。おめーはいらねーw

ただ、clientX、clientYもいちおう使えるようなので、今回はそれを使用することにする。
これはブラウザのクライアント領域上の座標を返すものであるため、ページがスクロールされているとページ上の座標とずれてしまう。
それを補正するために、スクロール位置を示すdocument.documentElement.scrollLeft、document.documentElement.scrollTopを加算し、ページ上の座標を取得しているのだ。
スポンサーサイト

PageTop

コメント


管理者にだけ表示を許可する