Bootstrap3 モーダルとmodal.jsの簡単な使い方

Tweet

Pocket

Bootstrap3のモーダルウィンドウの使い方。

Bootstrap3ではクリックするとポップアップウィンドウが表示される、モーダルコンポーネントが搭載されています。メッセージやフォームの入力、大きいサイズの画像の表示など様々な用途に使用可能。

構造は少し複雑ですが、基本的な要素を押さえればそれほど難しくないので使ってみてください。

Bootstrap3 モーダルの使い方

モーダルの構造は大きく分けて、呼び出しボタンとモーダル本体の２つ。

呼び出しボタンはdata-toggleとdata-targetのみ。本体は複雑な構造になってますが、.modal > .modal-dialog > .modal-contentの中にヘッダー、フッター、コンテンツが入るだけなのでテンプレートとして覚えておくと便利です。

また、.modalclassに.fadeをつけることでフェードインアニメーションを追加できます。

<button class="btn btn-default" data-toggle="modal" data-target="#myModal">
  モーダルオープン
</button>
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">
        モーダルのbody部分
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

デモページはこちら

モーダルのサイズを変更する方法

モーダルウィンドウは.modal-dialogのところにサイズ用のclassを付け加えるだけでウィンドウサイズを変更することができます。

<!-- 大きいモーダル -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大きいモーダル</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      大きいモーダル
    </div>
  </div>
</div>

<!-- 小さいモーダル -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小さいモーダル</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      小さいモーダル
    </div>
  </div>
</div>

デモページはこちら

Modal.jsの使い方

Modalの設定オプション

モーダルウィンドウはオプションを書き換えることで設定を変更することができます。

// javascriptで設定
$('#myModal').modal({
  backdrop: true,
  keyboard: true,
  show: true
})

また、オプションはJavascriptだけでなくdata-属性としてHTML上に記述することもできます。

<!-- データ属性でオプション設定 -->
<div id="modalOption" class="modal fade" data-backdrop="true">

Modalを操作するコマンド

Modal.jsではオプションの他にモーダルウィンドウを操作するメソッドが用意されています。この機能を使うことで、再生・停止ボタンと言った操作機能を作ることが可能です。

// テキストリンクでモーダルを開く
$('.modal-toggle-link').click(function () {
  $('.modal-link').modal('toggle');
});

また、各動作ごとにイベントハンドラも用意されています。動作の始まりや終わりで処理を追加したい時に使えます。

// モーダルが呼び出されたら発動
$('#modal-js-sample').on('show.bs.modal', function () {
  // 処理
});
// モーダル隠れたら
$('#modal-js-sample').on('hidden.bs.modal', function () {
  // 処理
});

デモページはこちら