Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Modal (モーダル)

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

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 モーダルの例です (つまり、positiondisplay がオーバーライドされていることを意味します)。 これには、モーダルヘッダ、モーダルボディ(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

Tooltipspopovers は、必要に応じてモーダル内に配置することができます。モーダルが閉じられると、その中にあるツールチップやポップオーバーも自動的に削除されます。

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

Varying modal content

クリックされたボタンに応じて、モーダルの内容を変更できます。 event.relatedTargetHTML 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="...." を追加してください。さらに、.modalaria-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>

Fullscreen Modal

.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...
})