アラート・ダイアログ・折りたたみ表示 (3/5)

アラートは、あくまでコンテンツの中にメッセージとして挿入されるものでした。が、画面の上に、別のウインドウとして何かを表示したいこともあります。こうしたときに用いられるのが「ダイアログ」です。

ダイアログは、ちょっと複雑なタグ構造をしています。アラートと同様、あらかじめ表示するダイアログの内容を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にしてみてください。