スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

Bootstrapのコードを少しずつまとめていきます。
今回はモーダルダイアログの書式です。
クラス名や属性名が多くてとてもややこしいです。

~ 目次 ~

  1. モーダルダイアログの作成
  2. モーダルダイアログの応用:画像の拡大
  3. モーダルダイアログ:サイズの変更

モーダルダイアログの作成

まずはモーダルダイアログを開く要素に、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>&times;</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">&times;</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">&times;</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">&times;</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">&times;</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以下のときは、ウィンドウ幅に合わせた表示