3を試してみるシリーズの第8弾は、モーダルダイアログの表示を行うModalsを試してみます。作業の前提条件は、下記のとおりです。指定して、HTMLを作成します。ボタン作成モーダルダイアログは、ボタンをクリックすると表示されるため、呼び出し元のボタンを作成します。作成時に指定する属性は、下記のとおりです。modalを指定します。ボタンに紐付くダイアログのIDを指定します。Source</button>ダイアログの定義modalクラスを使用して、ダイアログを定義します。定義の際には、先に作成したIDを指定する必要があります。-->モーダルダイアログの作成モーダルダイアログは、以下の4つのクラスから構成されます。mode-header/model-body/modal-footerから構成されます。ダイアログのヘッダーやボタンを定義します。ダイアログに表示するコンテンツを定義します。ダイアログのフッターやボタンを定義します。modal-headerの作成ダイアログに表示するボタンやダイアログのタイトルを作成します。Dialog</h4></div>modal-bodyの作成ダイアログに表示するコンテンツを作成します。</pre></div>modal-footerの作成フッターの作成は、必須ではありませんが、フッターにクローズボタンを配置することで、ダイアログをクローズボタンで閉じることができます。-->サンプルでは、とダイアログ表示の比較を行っています。</body></html>デモは、030.htmlからご覧頂けます。ファイルは、030.zipからダウンロードできます。