Lightbox風モーダルウィンドウ

3-8ではLightbox風モーダルウィンドウが登場！これはいつもプラグインでやっていたjQueryでした。やっと自分で出来るようになるとは！

やり方が実に「なるほど！」というものです。

最初にHTMLとCSSで表現を考えておきます。今回はモーダルウィンドウが開いた状態をHTMLで考えておきます。

ID名「glayLayer」で画面いっぱいの透明グレーのdivを作っておき、その上にポップアップされた画像をID名「overLayer」で置くようにposition指定します。

次にjQueryの実装に入ります。その際は先ほどの「glayLayer」と「overLayer」をHTML内から外しておきます。（jQueryでこのdivたちを挿入する命令をするのです！）

どのように入れるかというと、$(' body ')にappend()を使って<div id="glayLayer"></div><div id="overLayer"></div>を入れます。

最初の命令に「glayLayerをクリックしたとき、ポップアップのdiv要素がhide()する」という記述をしておきます。

次にクラス名「modal」が付いたa要素をクリックするとdivたちが表示される命令をします。

append()も実は「そういえばあった…」という感じで参考書を見返しました。(^ ^;;

それと、ちょっと難しく感じたのが「画像ではなくテキストをモーダルウィンドウにしたい」という部分です。テキストにするとwidth、heightがバラバラで、position指定ができないため、その要素の位置を取得する方法も考える必要があります。

そこで登場するのがwidth()、height()！ちょっとややこしいですが、参考書に書いてあったのが、

"margin-top": "-"+$("#overLayer").height()/2+"px",

"margin-left": "-"+$("#overLayer").width()/2+"px"

さらに閉じるボタンも設置しておけば完璧です。

次の章のドラッグ＆ドロップで動くフローティングウィンドウも位置を取得する系です。mousedown()、mouseup()イベントが出てきて、「こういうときに使うのか！」と思ってしまいました。

位置を取得する「function(e)」「e.pageX」「e.pageY」、「$(セレクタ).offset().top」「$(セレクタ).offset().left」はまだまだ自分のものにしていないのを実感しています。

本当によく出てくる命令なので、覚えてしまおうと思います。