クリックした画像をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。
HTML
補足
- HTML に関してはモーダル・ウィンドウを用意する以外、特にすることはありません。
jQuery
補足
- 画像がクリックされたら、モーダル・ウィンドウにクラス IMAGE を付加します。
- 続いて、コンテナ内に span class="IMG を作成し、その背景画像にクリックした画像のファイル名を設定します。最後にモーダル・ウィンドウを表示します。
CSS
補足
- クラス IMAGE が付加されたモーダル・ウィンドウは、背景が透過されるように設定しています。
- span class="IMG" はブロック要素化しコンテナと同じ大きさにして、背景画像が比率を保ったまま最大表示されるよう contain を指定しています。