modal.js

モーダル機能は合理的且つ柔軟なつくりになっており、 必要とされる最低限の機能とスマートなデフォルト設定を備え、確認を行うためのダイアログを提供します。

• 使用例
• サイズ指定
• アニメーションの削除
• グリッドシステムの使用
• ボタンからの呼び出しによる様々なモーダル
• 使用方法
• オプション
• メソッド
• イベント

複数のモーダルを開く機能はサポートされていません
別のモーダルが表示されている間は、新しくモーダルを開くことが出来ないことに注意してください。 一度に複数のモーダルを表示するには、コードのカスタマイズが必要になります。

モーダルのマークアップの置き換え
モーダルのHTMLコードは常にdocumentのトップ階層に配置することをこころがけ、 他のコンポーネントがモーダルの外観または機能に影響を及ぼすことを避けるようにしてください。

モバイルデバイスでの注意 モバイルデバイス上でのモーダルの使用に関して、いくつか注意点があります。 詳細は、ブラウザサポートのドキュメントを参照してください。

HTML5はその意味(semantics)を定義する方法であるため、autofocusのHTML属性はBootstrapのモーダルでは機能しません。 同じ効果をもたらすには、下記のようなJavaScriptを使用したカスタマイズが必要になります。

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

使用例

静的な例

ヘッダー、ボディ、アクション付きのフッターのあるモーダルを描画する例になります。

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ライブデモ

下記のボタンをクリックすることで、JavaScriptを通じてモーダルが表示/非表示されます。 ページの最上部から、スライドダウンとフェードインのエフェクトによって表示されます。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

YouTube動画の埋め込み
モーダル内へのYouTube動画埋め込みには、 自動停止・再生等のBootstrap内には無い追加のJavaScriptが必要になります。 詳細な情報については、Stack Overflowの投稿を参照してください。

サイズ指定

モーダルには、.modal-dialog上に配置される修飾子クラスを通して利用できる、2つのサイズが用意されています。

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

アニメーションの削除

フェードイン表示するのではなく、シンプルにモーダルを表示するには、 モーダルのマークアップから.fadeクラスを削除します。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

グリッドシステムの使用

モーダル内でBootstrapのグリッドシステムの利点を享受するために、 .modal-body内に.container-fluidを入れ子にして、 このコンテナ内で通常のグリッドシステムのクラスを使用します。

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
                <div class="col-xs-8 col-sm-6">
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ボタンからの呼び出しによる様々なモーダル

少しだけ異なる内容で、同じモーダルを呼び出す複数のボタンを持つにはどのようにすればよいのでしょうか？ それには、event.relatedTargetとHTMLのdata-*属性(jQueryも可)を使用して、 クリックされたボタンによってモーダルの内容を変化させます。 relatedTargetの詳細については、モーダルのイベントのドキュメントを参照してください。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)     // モーダルをトリガするボタン
  var recipient = button.data('whatever') // data-*属性から情報を抜き出します。

  // 必要であれば、ここにAJAXのリクエストを開始する処理を書きます。
  // (その後、コールバックで更新処理を行います)

  // モーダルの内容を更新します。
  // 我々はここでjQueryを使用していますが、
  //代わりにデータバインディングのライブラリや他の方法を使用しても構いません。
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

使用方法

モーダルプラグインはdata属性またはJavaScriptを通じて、必要に応じてコンテンツの表示/非表示を切り替えます。 また、<body>へ.modal-openを追加して、デフォルトのスクロールの挙動を上書きし、 .modal-backdropを生成してクリック領域を提供することで、 モーダルの外側がクリックされた際に表示されているモーダルを非表示にします。

data属性を使用する方法

JavaScriptを書くこと無く、モーダルを動作させます。 ボタンのような制御する側の要素上でdata-toggle="modal"を設定し、 data-target="#foo"またはhref="#foo"によって、表示/非表示を切り替える対象を特定します。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScriptを使用する方法

myModalのIDを使用することで、1行のJavaScriptでモーダルを呼び出します。

$('#myModal').modal(options)

オプション

オプションはdata属性またはJavaScriptを通じて渡すことが可能です。 data属性では、data-backdrop=""のようにオプション名をdata-の後ろにに付け加えます。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

メソッド

.modal(options)

モダールとしての機能を有効化します。 任意のオプションのオブジェクトを受け取ります。

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

モーダルを手動で切り替えます。 呼び出し元には、実際にモーダルが表示/非表示される前に返されます。 (つまり、shown.bs.modalまたはhidden.bs.modalイベントが発生する前)

$('#myModal').modal('toggle')

.modal('show')

モーダルを手動で表示します。 呼び出し元には、実際にモーダルが表示される前に返されます。 (つまり、shown.bs.modalイベントが発生する前)

$('#myModal').modal('show')

.modal('hide')

モーダルを手動で非表示にします。 呼び出し元には、実際にモーダルが非表示にされる前に返されます。 (つまり、hidden.bs.modalイベントが発生する前)

$('#myModal').modal('hide')

.modal('handleUpdate')

モーダルが左にジャンプしてしまうケースで、 スクロールバーに対してモーダルの位置を再調整します。(翻訳に自信なし)

モーダルが開いている間に、そのモーダルの高さが変更される場合にのみ必要となります。

$('#myModal').modal('handleUpdate')

イベント

Bootstrapのモーダルクラスは、モーダルの機能へフック出来るように、幾つかのイベントにアクセス出来るようにしています。

全てのモーダルのイベントは、モーダル自身で発火されます。(つまり、<div class="modal">で)

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

 Back to top