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

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	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
focus	boolean	true	Puts the focus on the modal when initialized.
show	boolean	true	Shows the modal when initialized.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

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	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.bs.modal	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

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

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

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