Modal

Modal(モーダル)では, JavaScript modal プラグインを使用して, ライトボックス, 通知, カスタムダイアログを作成できます。モーダルの使い方の例を示します。

How it works

モーダルの実装を始める前に下記のオプションの変更点を確認してください。

モーダルは HTML, CSS, JavaScript で構築されています。モーダルは <body> からスクロールを無効にして, 代わりにモーダルコンテンツがスクロールします。
モーダルの “backdrop” をクリックすると自動でモーダルは閉じます。
モーダルは画面上で1度に1個までしかサポートされません。ネスとされたモーダルはユーザー体験を低下させるためサポートしていません。
モーダルは position: fixed を使用しています。他の要素からの潜在的な干渉を避けるために, モーダルのHTMLを最上位に配置します。別の固定要素の中に ``.modal’` を入れ子にすると, 問題がおきます。
position：fixed を使用しているため, モバイルデバイスにモーダルを使用することでいくつかの警告があります。 See our browser support docs を参考にしてください。
HTML5がそのセマンティクスをどのように定義するかによって the autofocus HTML attribute はブートストラップには何の効果もありません。同じ効果を得るには, カスタムJavaScriptを使用してください：

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

デモと使い方のガイドラインを参照してください。

Examples

下記は static モーダルの例です。 ( position と display がオーバーライドされたことを意味します). 例はヘッダー,ボディ,フッターが配置されています。 and modal footer (optional). モーダルを終了するヘッダを含めるか, 明示的な終了するアクションを提供することを推奨します。

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Live demo

下記のボタンをクリックすると, ページの上からスライドしてフェードインしてモーダルが表示されます。

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

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

Scrolling long content

モーダルのコンテンツが長い場合は, スクロールできるようにします。下記の例を見てください。

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

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

Vertically centered

.modal-dialog-centered と .modal-dialog を適用します。

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

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

Tooltips and popovers

Tooltips と popovers を必要に応じてモーダル内に配置します。モーダルが閉じられると, ツールヒントやポップオーバーも自動的に閉じられます。

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Using the grid

.modal-body 内に .container-fluid を入れ子にしてグリッドシステムを利用できます。

<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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

モーダルを起動する複数のボタンが必要な場合は event.relatedTarget と HTML data-* attributes (possibly via jQuery) を使用します。

下記に設定例を示します。 relatedTarget の詳細は read the modal events docs に記載されています。

<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>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" 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) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Change animation

$modal-fade-transform 変数はモーダルのフェードインアニメーションする前の .modal-dialog の transform の状態を設定します。 $modal-show-transform 変数はモーダルのフェードインアニメーション終了時の .modal-dialog の transform の状態を設定します。

例えばズームインアニメーションを用いたい場合は, $modal-fade-transform: scale(.8) を指定することでこれを実現できます。

Remove animation

フェードインではなく, いきなり表示されるモーダルにする場合は, モーダルのマークアップから .fade クラスを削除します。

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

Dynamic heights

高さがモーダルの開いている間に変更され, スクロールバーが表示された場合には $('#myModal').modal('handleUpdate') を呼び出してモーダルの位置を再調整する必要があります。

Accessibility

モーダルタイトルを参照する role="dialog" と aria-labelledby="..." を .modal に, role="document" を .modal-dialog に必ず追加します。モーダルダイアログの説明を .modal の aria-describedby で指定することも可能です。

Embedding YouTube videos

YouTubeの動画をモーダルに埋め込むには, 再生を自動的に停止するなどの追加のJavaScriptが必要です。詳細は See this helpful Stack Overflow post を参照してください。

Optional sizes

モーダルは3つのサイズのオプションがあります。.modal-dialog に配置することが可能です。これらのサイズは, 狭い viewport での水平スクロールバーの出現を避けるために特定のブレークポイントで実行される。

Size	Class	Modal max-width
Small	`.modal-sm`	`300px`
Default	None	`500px`
Large	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

デフォルトは, “中”サイズのモーダルを構成します。

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <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=".bd-example-modal-sm">Small modal</button>

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

Usage

モーダルプラグインはデータ属性やJavaScriptを使用して, 非表示のコンテンツを切り替えます。 <body> に .modal-open を適用してデフォルトのスクロール動作を再定義し, モーダルの外側をクリックしたときに, 閉じるためのクリック領域を提供する .modal-backdrop を生成します。

Via data attributes

JavaScriptを書かずにモーダルを有効にします。特定のモーダルを起動させるためには data-target="#foo" または href="#foo" とともに, ボタンのようなコントローラー要素に data-toggle = "modal" を設定します。

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

Via JavaScript

JavaScript1行でID myModal のモーダルを呼び出します。

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

Options

オプションはデータ属性またはJavaScriptを使用して渡すことが可能です。データ属性の場合 data-backdrop="" のように data- にオプション名を追加します。

Name	Type	Default	Description
backdrop	boolean or the string `'static'`	true	モーダルの背景をつけるかを設定します。また, モーダルをクリックで閉じない場合には, `static` を指定してください。
keyboard	boolean	true	エスケープキーによってモーダルを閉じるかを設定します。
focus	boolean	true	モーダルが起動したときに, フォーカスをモーダルに移すかを設定します。
show	boolean	true	モーダルが起動したときに表示するかを指定します。

Methods

Asynchronous methods and transitions

すべての API メソッドは非同期であり, 遷移を開始します。これらは遷移が始まってすぐ, それが終わる前に return されます。加えて, 遷移中のコンポーネントから呼ばれたメソッドは無視されます。

See our JavaScript documentation for more information.

`.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')

`.modal('dispose')`

要素のモーダルを廃棄します。

Events

モーダル機能に接続するためのいくつかのイベントを公開しています。 <div class="modal">で発動します。

Event Type	Description
show.bs.modal	`show` インスタンスメソッドが呼ばれたときにすぐに発生します。クリックによって発生した場合, クリックされた要素は event の `relatedTarget` プロパティから取得できます。
shown.bs.modal	このイベントはモーダルがユーザに見えるようになったときに発生します（CSSによる遷移を待機します）。クリックによって発生した場合, クリックされた要素は event の `relatedTarget` プロパティから取得できます。
hide.bs.modal	`hide` インスタンスメソッドが呼ばれたときにすぐに発生します。
hidden.bs.modal	このイベントはモーダルがユーザから見えなくなった直後に発生します（CSSによる遷移を待機します）。

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

v4.3

Modal

How it works

Examples

Modal components

Live demo

Scrolling long content

Vertically centered

Tooltips and popovers

Tooltips and popovers

Using the grid

Varying modal content

Change animation

Remove animation

Dynamic heights

Accessibility

Embedding YouTube videos

Optional sizes

Usage

Via data attributes

Via JavaScript

Options

Methods

Asynchronous methods and transitions

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

.modal('dispose')

Events

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`.modal('dispose')`