あらかじめ非表示にしておいた div 要素をモーダル・ウィンドウに表示する方法を紹介します。
HTML
補足
- モーダル・ウィンドウ div id="MODAL-WINDOW" を用意し、非表示にしておきます。
- モーダル・ウィンドウに表示する内容を div id="data-div" 内に記述して、非表示にしておきます。
jQuery
補足
- #load-data-div がクリックされたら、モーダル・ウィンドウのコンテナに表示する内容をコピーし、モーダル・ウィンドウを表示します。
- モーダル・ウィンドウの閉じるボタンがクリックされたら、モーダル・ウィンドウを非表示にし、コンテナ内にコピーしたデータを空にします。
- 最後にモーダル・ウィンドウに付加されたクラスを削除します（このサンプルではクラスを付加していないので、削除する意味はありません）。
CSS
補足
- モーダル・ウィンドウ関連のスタイルを定義しています。
- iOS でコンテナのスクロール・バーが表示されないので、表示されるよう定義しています。
- モーダル・ウィンドウとコンテナに表示する内容は非表示にしています。