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

Pocket

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

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

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

Bootstrap3 モーダルの使い方

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

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

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

Class名 概要
data-toggle="modal" Modalの呼び出しボタンとして機能させる
data-dismiss="modal" モーダルを閉じるボタンとして機能させる
data-target="#myModal" 呼び出す対象を指定
.modal.fade モーダルのスタイルとフェードインアニメーションの追加
.modal-dialog > .modal-content モーダルを作成
.modal-header モーダルのヘッダー
.modal-header > .modal-title モーダルのタイトルを表示
.modal-body モーダルのコンテンツ部分
.modal-footer モーダルのフッター
<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を付け加えるだけでウィンドウサイズを変更することができます。

Class名 概要
.modal-dialog.modal-lg 大きいモーダルを作成
.modal-dialog.modal-sm 小さいモーダルを作成
<!-- 大きいモーダル -->
<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の設定オプション

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

option名 概要
backdrop スライドのスピード
keyboard Escキーでモーダルウィンドウを閉じる
show 初期化時にモーダルウィンドウを表示
// javascriptで設定
$('#myModal').modal({
  backdrop: true,
  keyboard: true,
  show: true
})

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

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

Modalを操作するコマンド

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

function名 概要
.modal('toggle') モーダルを開いたり閉じたりする
.modal('show') モーダルを開く
.modal('hide') モーダルを閉じる
.modal('handleUpdate') 前のページを表示
// テキストリンクでモーダルを開く
$('.modal-toggle-link').click(function () {
  $('.modal-link').modal('toggle');
});

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

function名 概要
show.bs.modal モーダルウィンドウが呼び出されたら発動
shown.bs.modal モーダルが表示されたら発動
hide.bs.modal hideメソッドが呼び出されたら発動
hidden.bs.modal モーダルが隠れたら発動
// モーダルが呼び出されたら発動
$('#modal-js-sample').on('show.bs.modal', function () {
  // 処理
});
// モーダル隠れたら
$('#modal-js-sample').on('hidden.bs.modal', function () {
  // 処理
});

デモページはこちら