Modal (モーダル)

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

On this page

How it works

Bootstrapのモーダルコンポーネントを使い始める前に、メニューオプションが変更されたので、以下を読んでください。

モーダルは HTML、CSS、JavaScript で構築されます。モーダルはドキュメント内の他のすべてのものの上に配置され、<body> からスクロールを取り除き、モーダルのコンテンツがスクロールするようにします。
モーダルの「背景」をクリックすると、自動的にモーダルが閉じます。
Bootstrapは、一度に1つのモーダルウィンドウしかサポートしていません。ネスト(入れ子)になったモーダルはユーザーエクスペリエンスが低いと考えられるためサポートされていません。
モーダルは position: fixed を使用します。可能な限り、他の要素との干渉を避けるために、モーダルHTMLをトップレベルの位置に配置してください。別の固定要素の中に .modal を入れ子にすると、問題が発生する可能性があります。
繰り返しになりますが、position: fixedのため、モバイルデバイスでモーダルを使用する際にはいくつかの注意点があります。詳細は See our browser support docs を参照してください。
HTML5がそのセマンティクスを定義する方法のため, the autofocus HTML attribute はBootstrapのモーダルでは効果がありません。同じ効果を得るためには、いくつかのカスタムJavaScriptを使用してください。

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの reduced motion セクションを参照してください。

デモと使用ガイドラインについては、引き続きお読みください。

Examples

以下は static モーダルの例です (つまり、position と display がオーバーライドされていることを意味します)。これには、モーダルヘッダ、モーダルボディ(padding のために必要)、モーダルフッタ(オプション)が含まれています。可能な限り、モーダルヘッダを dismiss アクションと一緒に含めるか、別の明示的な dismiss アクションを提供するようにお願いします。

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

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

Static backdrop

バックドロップを静的に設定していると、その外側をクリックしてもモーダルが閉じません。下のボタンをクリックして試してみてください。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Scrolling long content

モーダルがユーザーのビューポートやデバイスに対して長すぎると、ページ自体から独立してスクロールします。以下のデモを試してみてください。

また、.modal-dialog に .modal-dialog-scrollable を追加することで、モーダル本体をスクロールできるスクロール可能なモーダルを作成することもできます。

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertically centered

モーダルを垂直方向に中央に配置するために .modal-dialog-centered を .modal-dialog に追加します。

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-* attributes を使用してください。

以下は、HTMLとJavaScriptの例に続くライブデモです。relatedTarget の詳細は read the modal events docs を参考にしてください。

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

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Toggle between modals

data-bs-target 属性と data-bs-toggle 属性を利用して、複数のモーダルを切り替え可能です。 複数のモーダルを同時に開くことはできないことに注意してください —この方法は、2つの別々のモーダルを切り替えるだけです。

Open first modal

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Change animation

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

例えばズームインアニメーションを作りたい場合は、$modal-fade-transform: scale(.8)を設定します。

Remove animation

フェードインして表示するのではなく、単に表示するだけのモーダルの場合は、.fade クラスを削除します。

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

Dynamic heights

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

Accessibility

必ず .modal にモーダルのタイトルを参照する aria-labelledby="...." を追加してください。さらに、.modal に aria-describedby を追加することで、モーダルダイアログの説明を与えることができます。JavaScriptで既に追加しているので、role="dialog"を追加する必要はありません。

Embedding YouTube videos

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

Optional sizes

モーダルには3つのオプションのサイズがあり、.modal-dialog に配置することができます。これらのサイズは、狭いビューポートでの水平スクロールバーを避けるために、特定のブレークポイントで有効になります。

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

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

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

.modal-dialog には下記のクラスをついかすることにより、フルスクリーンのモーダルを利用可能です。

Class	Availability
`.modal-fullscreen`	Always
`.modal-fullscreen-sm-down`	Below `576px`
`.modal-fullscreen-md-down`	Below `768px`
`.modal-fullscreen-lg-down`	Below `992px`
`.modal-fullscreen-xl-down`	Below `1200px`
`.modal-fullscreen-xxl-down`	Below `1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Variables

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Responsive fullscreen modals are generated via the $breakpoints map and a loop in scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Usage

モーダルプラグインは、データ属性やJavaScriptを使って、必要に応じて隠しコンテンツを切り替えます。また、デフォルトのスクロール動作を上書きするために .modal-open を <body> に追加し、モーダルの外側をクリックしたときに表示されたモーダルを削除するためのクリック領域を提供するために .modal-backdrop を生成します。

Via data attributes

JavaScript を書かずにモーダルを有効にします。ボタンのようなコントローラ要素に data-bs-toggle="modal"を設定し、さらに data-bs-target="#foo" や href="#foo" を指定して特定のモーダルをターゲットにしてトグルします。

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

Via JavaScript

JavaScript 1行でモーダルを作成します。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Options

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

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.

Methods

非同期のメソッドとトランジション

すべての API メソッドは非同期で、トランジションを開始します。トランジションが開始されると同時に呼び出し元に返されますが、トランジションが終了する前に返されます。また、遷移中のコンポーネントに対するメソッドコールは無視されます。

詳しくは JavaScript のドキュメントをご覧ください。

Passing options

モーダルとしてコンテンツをアクティブにします。オプションの object を受け取ります。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

toggle

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

myModal.toggle()

show

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

myModal.show()

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

hide

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

myModal.hide()

handleUpdate

開いている間にモーダルの高さが変化した場合、モーダルの位置を手動で再調整します（スクロールバーが表示されている場合など）。

myModal.handleUpdate()

dispose

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

myModal.dispose()

getInstance

DOM 要素に関連付けられたモーダルインスタンスを取得できるようにする Static メソッドです。

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

Events

Bootstrapのモーダルクラスは、モーダル機能にフックするためのいくつかのイベントがあります。すべてのモーダルイベントは、モーダル自体（つまり、<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).
`hidePrevented.bs.modal`	This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})