モーダルダイアログの書式：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>

内容はヘッダー・本文・フッターの３つの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のまとめ

モーダルダイアログの応用：画像の拡大

モーダルダイアログの機能を応用して、画像をライトボックスのように拡大表示することも可能です。

画像の場合、モーダルダイアログを開く要素を「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>

ブラウザでの表示はサンプルページをご参照ください。