アラート・ダイアログ・折りたたみ表示 (3/5)
作成:2017-03-18 08:44
更新:2017-03-18 08:44
更新:2017-03-18 08:44
■モーダルダイアログ
アラートは、あくまでコンテンツの中にメッセージとして挿入されるものでした。が、画面の上に、別のウインドウとして何かを表示したいこともあります。こうしたときに用いられるのが「ダイアログ」です。
ダイアログは、ちょっと複雑なタグ構造をしています。アラートと同様、あらかじめ表示するダイアログの内容をTHMLタグで作成しておき、これをボタンクリックなどで表示させるやり方になります。まずは、ダイアログのタグ構造を整理しておきましょう。
かなり複雑でわかりにくいですね。もう少しわかりやすくすると、以下のような構造になっていることがわかります。
・ダイアログ全体
・コンテンツの部分
・ヘッダー、ボディ、フッター
ダイアログは、class="modal-dialog"を指定した<div>タグで作成します。その中に、コンテンツを表示するclass="modal-content"のタグを用意し、更にその中にヘッダー、ボディ、フッターの各タグを用意して内容を記述します。この構成がダイアログの基本形と考えて良いでしょう。
ダイアログは、ちょっと複雑なタグ構造をしています。アラートと同様、あらかじめ表示するダイアログの内容をTHMLタグで作成しておき、これをボタンクリックなどで表示させるやり方になります。まずは、ダイアログのタグ構造を整理しておきましょう。
<div class="modal fade" id="ダイアログのID" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
……ヘッダーの表示……
</div>
<div class="modal-body">
……表示するメッセージ……
</div>
<div class="modal-footer">
……フッターの表示……
</div>
</div>
</div>
</div>
かなり複雑でわかりにくいですね。もう少しわかりやすくすると、以下のような構造になっていることがわかります。
・ダイアログ全体
<div class="modal-dialog">
・コンテンツの部分
<div class="modal-content">
・ヘッダー、ボディ、フッター
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
ダイアログは、class="modal-dialog"を指定した<div>タグで作成します。その中に、コンテンツを表示するclass="modal-content"のタグを用意し、更にその中にヘッダー、ボディ、フッターの各タグを用意して内容を記述します。この構成がダイアログの基本形と考えて良いでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ