Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Modal (モーダル)

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

目次

How it works

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

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

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

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

Static backdrop

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

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

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">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-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>

Varying modal content

クリックされたボタンに応じて、モーダルの内容を変更できます。 event.relatedTargetHTML data-* attributes を使用してください。

以下は、HTMLとJavaScriptの例に続くライブデモです。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" 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-* attributes
  var recipient = button.getAttribute('data-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
})

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
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Usage

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

Via data attributes

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

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

Via JavaScript

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), 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

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.

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

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 このイベントは、showインスタンス・メソッドが呼ばれたときにすぐに発生します。クリックによって発生した場合、クリックされた要素は、イベントのrelatedTargetプロパティとして利用可能です。
shown.bs.modal このイベントは、モーダルがユーザーに見えるようになったときに発生します(CSS トランジションが完了するのを待ちます)。クリックによって発生した場合、クリックされた要素は、イベントのrelatedTargetプロパティとして利用可能です。
hide.bs.modal このイベントは、hideインスタンスメソッドが呼び出されたときにすぐに発生します。
hidden.bs.modal このイベントは、モーダルの非表示が完了したときに発生します(CSS トランジションが完了するのを待ちます)。
hidePrevented.bs.modal このイベントは、モーダルが表示され、その背景がstaticで、キーボードオプションまたはdata-keyboardfalseに設定されている状態で、モーダルの外側でのクリックやエスケープキーの押下が行われたときに発生します。
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (e) {
  // do something...
})