このページの本文へ

DESIGN 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でどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。

サンプル01完成図
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;
}


jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング