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

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

【クライアントのわがままに応える！】

画像ではなくテキストをモーダルウィンドウに表示したい！

　「画像じゃなくて説明文をライトボックス風に表示してほしい｣――。サンプル02ではモーダルウィンドウに画像を表示しましたが、画像の代わりにテキストなどの任意のHTMLも表示できます。

メニューをクリックするとHTMLがモーダルウィンドウ上に表示される

　HTML部分は次のようになります。今回はdl/dt/ddの定義型リストでメニューを作成し、dt要素のメニューがクリックされるたらdd要素の内容をモーダルウィンドウに表示してみましょう。

▼サンプル04（HTML部分）

<dl>
    <dt>Lorem ipsum dolor sit amet,</dt>
    <dd><p>Lorem ...(中略)... felis mauris.</dt>
    <dt>Integer rhoncus felis mauris.</dt>
    <dd><p>Integer ...(中略)...tempor.</dt>
    <dd><p>Integer ...(中略)...imperdiet. </p></dd>
</dl>

　CSS部分は次のとおりです。サンプル02との大きな違いは、子ウィンドウ（#overLayer）に対してwidthを指定していること、margin-topとmargin-leftは設定しないことです。大きさが一定の画像と異なり、任意のHTMLをモーダルウィンドウで表示する場合は内容によってウィンドウのサイズが変わります。そこで、ウィンドウを中央に表示するためのmargin-topとmargin-leftの値はjQueryで要素のサイズを取得し、調整します。

▼サンプル04（CSS部分）

html,body{
    margin:0;
    padding:0;
    height:100%;
}
dl dt{
    margin:20px 50px;
    font-size:large;
    border:1px solid #7BAEB5;
    border-left:1em solid #7BAEB5;
    padding-left:10px;
    width:600px;
    cursor:pointer;
}
#glayLayer{
    display:none;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:#7BAEB5;
    filter:alpha(opacity=75);
    opacity: 0.75;
}
* html #glayLayer{
    position:absolute;
}
#overLayer{
    display:none;
    width:400px;
    background:white;
    padding:10px;
    position: fixed;
    top:50%;
    left:50%;
}
* html #overLayer{
    position: absolute;
}

　スクリプト部分は次のようになります。

▼サンプル04（スクリプト部分）

$(function(){
    
    $("dd").hide()
    $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>")
    
    $("#glayLayer").click(function(){
        $(this).hide()
        $("#overLayer").hide()
    })
    
    $("dt").click(function(){
        $("#glayLayer").show()
        $("#overLayer").show().html($("+dd",this).html()).css({
            marginTop:"-"+$("#overLayer").height()/2+"px" , 
            marginLeft:"-"+$("#overLayer").width()/2+"px" 
        })
        return false;
    })
    
    if($.browser.msie && $.browser.version<7){
        $(window).scroll(function(){
            $("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'")
            $("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'")
        })
    }
    
})

　スクリプトの冒頭には初期表示状態を作るため、hide()でdd要素を非表示に変更します。

$("dd").hide()

　dt要素のclickイベントにはサンプル02と同じく、半透明レイヤー（#glayLayer）と子ウィンドウ（#overLayer）を表示する処理を記述しますが、子ウィンドウには画像ではなくdd要素の内容を表示するため、処理の内容が少し異なります。

　#overLayerには、クリックされたdt要素の次に出現するdd要素を隣接セレクター（関連記事）を使って取得し、html()で追加します。また、子ウィンドウを中央に表示するためのmargin-topとmargin-leftのネガティブマージンもclickイベントの中で設定します。ネガティブマージンの値は、HTMLを含んだ#overLayerのwidth、heightをwidth()とheight()を使って取得し、その半分の値を設定します。

$("dt").click(function(){
    $("#glayLayer").show()
    $("#overLayer").show().html($("+dd",this).html()).css({
        marginTop:"-"+$("#overLayer").height()/2+"px" , 
        marginLeft:"-"+$("#overLayer").width()/2+"px" 
    })
    return false;
})

「閉じる」ボタンでさらに使いやすく

　サンプル04はモーダルウィンドウに「閉じる」ボタンを付けることで、より分かりやすいデザインにできます。ここではHTMLは特に変更せず、jQuery側で#overLayer内に「close」というclass属性が付いたimg要素を追加し、ボタンの機能を割り当てます。

このような「閉じる」ボタンを追加します

　まず、ボタン用のCSSを追加します。

▼サンプル05（CSS部分）

#overLayer img.close{
    position:absolute;
    top:-10px;
    right:-10px;
    cursor:pointer;
}

　スクリプト部分は、dt要素のclickイベントを次のように変更し、子ウィンドウ（#overLayer）に対してボタンを表示する処理を追加します。ボタン（class属性が「close」のimg要素）は、子ウィンドウ内に表示するdd要素の直前にhtml()で追加します。ボタンにはclickイベントを設定し、#glayLayerと#overLayerを非表示にする処理を記述します。

▼サンプル05（スクリプト部分）

$("dt").click(function(){
    $("#glayLayer").show()
    $("#overLayer").show().html("<img src='images/close.png' class='close' />"+$("+dd",this).html()).css({
        marginTop:"-"+$("#overLayer").height()/2+"px" , 
        marginLeft:"-"+$("#overLayer").width()/2+"px" 
    })
    
    $("#overLayer img.close").click(function(){
        $("#glayLayer").hide()
        $("#overLayer").hide()
    })
    return false;
})

　以上で、閉じるボタン付きのモーダルウィンドウが完成しました。今回は同じWebページ内のHTMLを取得して表示しましたが、Ajaxを使ってサーバー上のコンテンツを取得・表示したり、iframe要素で他のwebページの内容を子ウィンドウに表示するなどの応用ができます。モーダルウィンドウは実用性が高く、組み込みやすいUIですので、さまざまな場面で活用しましょう。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。