![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6WsKTan6PR9JH5sAWVBHwlE8u6Gd6Ww1qz45UPON9t9keZnALysSRjwKgrj-3rTA5HWqsYoE6O9m49fkx5HiPMiE3r7pbvClAnwUygwSS1lBVlsOnquPQMo1aEa80eL7QDlfF4WNMx-d/s1600/SnapCrab_%25E9%259D%259E%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25AB%25E3%2581%2597%25E3%2581%25A6%25E3%2581%258A%25E3%2581%2584%25E3%2581%259F+div+%25E8%25A6%2581%25E7%25B4%25A0%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-7-22_No-00.png)
あらかじめ非表示にしておいた div 要素をモーダル・ウィンドウに表示する方法を紹介します。
HTML
補足
- モーダル・ウィンドウ div id="MODAL-WINDOW" を用意し、非表示にしておきます。
- モーダル・ウィンドウに表示する内容を div id="data-div" 内に記述して、非表示にしておきます。
jQuery
補足
- #load-data-div がクリックされたら、モーダル・ウィンドウのコンテナに表示する内容をコピーし、モーダル・ウィンドウを表示します。
- モーダル・ウィンドウの閉じるボタンがクリックされたら、モーダル・ウィンドウを非表示にし、コンテナ内にコピーしたデータを空にします。
- 最後にモーダル・ウィンドウに付加されたクラスを削除します(このサンプルではクラスを付加していないので、削除する意味はありません)。
CSS
補足
- モーダル・ウィンドウ関連のスタイルを定義しています。
- iOS でコンテナのスクロール・バーが表示されないので、表示されるよう定義しています。
- モーダル・ウィンドウとコンテナに表示する内容は非表示にしています。