Web制作の現場で使えるjQuery　UIデザイン入門 ― 第20回

jQueryによるLightbox風モーダルウィンドウの作り方

2009年11月26日 13時00分更新

文● 西畑一馬／to-R

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第20回です。過去の記事もご覧ください。

　今回はjQueryで「モーダルウィンドウ」を作成する方法を解説します。モーダルウィンドウとは、表示中に他のウィンドウの操作を受け付けないウィンドウのことで、Webサイトにおいては一般的に、半透明のレイヤーを重ねてWebページを暗くした上に表示するウィンドウを指します。国内ではモーダルウィンドウを表示する代表的なJavaScriptライブラリーの名称から、「Lightbox（あるいはライトボックス風）ウィンドウ」と呼ばれることも多いUIです。

今回制作するサンプル


（画像クリックでサンプルページを表示します）

HTMLとCSSによる表現を考える

　複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。


HTMLとCSSでモーダルウィンドウを開いた状態の静的なページを作ります

　HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。

▼サンプル01（HTML部分）


<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
    <li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="シャンデリア" /></a></li>
    <li><a href="images/photo2.jpg" class="modal"><img src="images/photo2_thum.jpg" alt="バラ" /></a></li>
    <li><a href="images/photo3.jpg" class="modal"><img src="images/photo3_thum.jpg" alt="海" /></a></li>
    <li><a href="images/photo4.jpg" class="modal"><img src="images/photo4_thum.jpg" alt="門" /></a></li>
    <li><a href="images/photo5.jpg" class="modal"><img src="images/photo5_thum.jpg" alt="海" /></a></li>
    <li><a href="images/photo6.jpg" class="modal"><img src="images/photo6_thum.jpg" alt="あじさい" /></a></li>  <li><a href="images/photo7.jpg" class="modal"><img src="images/photo7_thum.jpg" alt="空" /></a></li>
    <li><a href="images/photo8.jpg" class="modal"><img src="images/photo8_thum.jpg" alt="建物" /></a></li>
</ul>
<div id="glayLayer"></div>
<div id="overLayer"><img src="images/photo5.jpg" /></div>

　次にCSS部分です。半透明レイヤー（glayLayer）をウィンドウと同じ高さにするため、glayLayerの親要素であるbody要素、およびbody要素の親要素であるhtml要素にheight:100%を設定します。この状態で子要素のglayLayerにheight:100%;を設定すると、glayLayerは親要素の100%、つまりウィンドウいっぱいの高さになります。

　html要素とbody要素はデフォルトで設定されている余白がブラウザーによって違うため、子ウィンドウを開いたときに位置がずれる場合があります。そこで、htmlとbodyにはmargin:0;とpadding:0;を設定してリセットします。

　半透明レイヤー（glayLayer）はheight:100%;とwidth:100%;で現在のウィンドウと同じサイズに変更し、position:fixed; top:0; left:0;でウィンドウの左上を起点に設定します。背景色を黒にし、opacityプロパティで半透明にすると、Webページ全体が暗くなったようになります。なお、opacityプロパティに対応していないInternet Explorer（IE）向けには、IE独自のfilterプロパティを使います。

　子ウィンドウ（overLayer）もposition: fixed;で配置します。topとleftに50%を設定し、margin-topに拡大画像の高さの半分のネガティブマージン（マイナス値のマージン）を、margin-leftに拡大画像の横幅の半分のネガティブマージンを設定すると、ウィンドウを画面中央に配置できます。

▼サンプル01（CSS部分）


html,body{
    margin:0;
    padding:0;
    height:100%;
}
#glayLayer{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:black;
    opacity: 0.60;
    filter:alpha(opacity=60);
}
#overLayer{
    position: fixed;
    top:50%;
    left:50%;
    margin-top:-244px;
    margin-left:-325px;
}