非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】で表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。
HTML
補足
- HTML は通常のモードと同じです。jQuery 側で表示モードを変えています。
jQuery
補足
- モーダル・ウィンドウを表示する前にクラス DIALOG を付加しています。それ以外は通常モードと同じです
CSS
補足
- クラス DIALOG が付いたモーダル・ウィンドウのコンテナのスタイルを定義しています。
- コンテナをダイアログ風の大きさにして、それがモーダル・ウィンドウの中央に表示されるようにしています。