![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTn29TrBITEKEAGYVofAKZe6wmFcRKpOqznVISVoltfMUSma3w9dI3RVwrah1XF0ZYD2JFV-7S9sTseeCXRP04sd69wb8e2VBpsaF6e7Uc0jceMzGSN6MdFsUZle-h-uJF2JPj5nbfk_OV/s1600/SnapCrab_%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%2583%25E3%2582%25AF%25E3%2581%2597%25E3%2581%259F%25E7%2594%25BB%25E5%2583%258F%25E3%2582%2592%25E3%2583%25A2%25E3%2583%25BC%25E3%2583%2580%25E3%2583%25AB%25E3%2583%25BB%25E3%2582%25A6%25E3%2582%25A3%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A6%25E3%2581%25AB%25E8%25A1%25A8%25E7%25A4%25BA+-+Google+Chrome_2017-3-7_9-11-34_No-00.png)
クリックした画像をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。
HTML
補足
- HTML に関してはモーダル・ウィンドウを用意する以外、特にすることはありません。
jQuery
補足
- 画像がクリックされたら、モーダル・ウィンドウにクラス IMAGE を付加します。
- 続いて、コンテナ内に span class="IMG を作成し、その背景画像にクリックした画像のファイル名を設定します。最後にモーダル・ウィンドウを表示します。
CSS
補足
- クラス IMAGE が付加されたモーダル・ウィンドウは、背景が透過されるように設定しています。
- span class="IMG" はブロック要素化しコンテナと同じ大きさにして、背景画像が比率を保ったまま最大表示されるよう contain を指定しています。