モーダルダイアログの書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はモーダルダイアログの書式です。
クラス名や属性名が多くてとてもややこしいです。
~ 目次 ~
- モーダルダイアログの作成
- モーダルダイアログの応用:画像の拡大
- モーダルダイアログ:サイズの変更
モーダルダイアログの作成
まずはモーダルダイアログを開く要素に、2つの属性を適用します。
「data-toggle=”modal”」
「data-target=”#任意のID名”」
次に、ダイアログの内容の記述です。
最初に、divの囲いを作り、class「modal」と「fade」、
id「任意のID名」を適用します。
続いて、この中に子要素divを作り、class「modal-dialog」を適用し、
さらに中に孫要素divを作り、class「modal-content」を適用します。
ややこしいので、ここまでのコードを記述しておきます。
<button data-toggle="modal" data-target="#任意のID名"> モーダルダイアログを開く要素 </button> <div class="modal fade" id="任意のID名"> <div class="modal-dialog"> <div class="modal-content"> モーダルダイアログの内容 </div> </div> </div>
内容はヘッダー・本文・フッターの3つのdiv要素で構成します。
ヘッダーはclass「modal-header」、
本文はclass「modal-body」、
フッターはclass「modal-footer」を適用します。
さらに、ヘッダー内に表示する文字にはclass「modal-title」を適用します。
また、ダイアログを閉じる要素には「data-dismiss=”modal”」という属性を適用します。
コードの記述例は以下になります。
HTML
<h2 class="page-header">モーダルダイアログ</h2> <button class="btn btn-info" data-toggle="modal" data-target="#cancel06"> 6月の休講日 </button> <div class="modal fade" id="cancel06"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">2016年6月の休講日</h4> </div> <div class="modal-body"> 6月は、先生ご多忙につき、7日・16日・28日の講座をお休みとさせていただきます。<br> 当初、21日も休講とのアナウンスがありましたが、21日は通常どおり授業を行います。 </div> <div class="modal-footer"> <p>オンライン講座・WEBデザイン科</p> <button class="btn btn-info btn-sm" data-dismiss="modal">閉じる</button> </div> </div> </div> </div>
ブラウザでの表示はサンプルページをご参照ください。
モーダルダイアログの内容:クラスとIDのまとめ
クラス | ID | 概要 |
---|---|---|
modal | モーダルダイアログの範囲 | |
fade | フェード効果の指定(省略可) | |
id=”任意のID名” | ダイアログを開く要素と同じID名を記述 | |
modal-dialog | 子要素:ダイアログの書式指定(位置・サイズ等) | |
modal-content | 孫要素:ダイアログの書式指定(枠線・角等) | |
modal-header | 内容:ヘッダー部分(省略可) | |
modal-title | 内容:見出し文字の書式(省略可) | |
modal-body | 内容:本文 | |
modal-footer | 内容:フッター部分(省略可) |
モーダルダイアログの応用:画像の拡大
モーダルダイアログの機能を応用して、画像をライトボックスのように拡大表示することも可能です。
画像の場合、モーダルダイアログを開く要素を「a要素」で作成し、data-target属性ではなく、href属性でID名を指定します。
HTML
<h2 class="page-header">モーダルダイアログの応用:画像の拡大</h2> <a href="#img-01" data-toggle="modal"> <img src="images/img001s.jpg"> </a> <div class="modal fade" id="img-01"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">閉じる</span> </button> <h4 class="modal-title">タンポポの綿毛</h4> <img src="images/img001.jpg" class="img-responsive"> </div> </div> </div> </div>
ブラウザでの表示はサンプルページをご参照ください。
モーダルダイアログ:サイズの変更
ダイアログのサイズを変更することも可能です。
大きいサイズで表示する場合はclass「modal-lg」を、
小さいサイズで表示する場合はclass「modal-sm」を、
modal-dialogを適用したdiv要素に追加します。
HTML
<h2 class="page-header">モーダルダイアログ:サイズの変更</h2> <button class="btn btn-success" data-toggle="modal" data-target="#size-lg"> 大サイズ </button> <div class="modal fade" id="size-lg"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <button class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">閉じる</span> </button> <h4 class="modal-title">大サイズ</h4> <img src="images/img002.jpg" class="img-responsive"> </div> </div> </div> </div> <button class="btn btn-success" data-toggle="modal" data-target="#size-md"> 標準サイズ </button> <div class="modal fade" id="size-md"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">閉じる</span> </button> <h4 class="modal-title">標準サイズ</h4> <img src="images/img002.jpg" class="img-responsive"> </div> </div> </div> </div> <button class="btn btn-success" data-toggle="modal" data-target="#size-sm"> 小サイズ </button> <div class="modal fade" id="size-sm"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-body"> <button class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">閉じる</span> </button> <h4 class="modal-title">小サイズ</h4> <img src="images/img002.jpg" class="img-responsive"> </div> </div> </div> </div>
ブラウザでの表示はサンプルページをご参照ください。
大サイズではダイアログが width900px で表示されます。
- この指定が有効になるのはウィンドウ幅が992px以上の場合
- ウィンドウ幅が991px以下のときはwidth600pxで表示
- ウィンドウ幅が767px以下のときは、ウィンドウ幅に合わせた表示
標準サイズではダイアログが width600px で表示されます。
- ウィンドウ幅が767px以下のときは、ウィンドウ幅に合わせた表示
小サイズではダイアログが width300px で表示されます。
- この指定が有効になるのはウィンドウ幅が768px以上の場合
- ウィンドウ幅が767px以下のときは、ウィンドウ幅に合わせた表示