2017年3月7日

クリックした画像をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

  • HTML に関してはモーダル・ウィンドウを用意する以外、特にすることはありません。

jQuery

補足

  • 画像がクリックされたら、モーダル・ウィンドウにクラス IMAGE を付加します。
  • 続いて、コンテナ内に span class="IMG を作成し、その背景画像にクリックした画像のファイル名を設定します。最後にモーダル・ウィンドウを表示します。

CSS

補足

  • クラス IMAGE が付加されたモーダル・ウィンドウは、背景が透過されるように設定しています。
  • span class="IMG" はブロック要素化しコンテナと同じ大きさにして、背景画像が比率を保ったまま最大表示されるよう contain を指定しています。

サンプル

関連記事