GitHubで表示

モーダル

BootstrapのJavaScriptモーダルプラグインを使用して、ライトボックス、ユーザー通知、または完全にカスタムのコンテンツ用に、ダイアログをサイトに追加します。

仕組み

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

モーダルはHTML、CSS、およびJavaScriptで構築されています。ドキュメント内の他のすべての要素の上に配置され、<body>からスクロールを削除して、代わりにモーダルコンテンツがスクロールするようにします。
モーダルの「背景」をクリックすると、モーダルが自動的に閉じます。
Bootstrapは一度に1つのモーダルウィンドウのみをサポートします。ネストされたモーダルは、ユーザーエクスペリエンスが悪いと考えているため、サポートされていません。
モーダルはposition: fixedを使用します。これにより、レンダリングに関して少し特殊になる場合があります。可能な限り、他の要素からの干渉を避けるために、モーダルHTMLを最上位の位置に配置してください。.modalを別の固定要素内にネストすると、問題が発生する可能性があります。
繰り返しになりますが、position: fixedのため、モバイルデバイスでモーダルを使用する場合にいくつかの注意点があります。詳細については、ブラウザサポートのドキュメントを参照してください。
HTML5がセマンティクスを定義する方法により、autofocus HTML属性はBootstrapモーダルでは効果がありません。同じ効果を実現するには、カスタムJavaScriptを使用してください。

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

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

デモと使用ガイドラインについては、読み進めてください。

例

以下は*静的*モーダルの例です (つまり、positionとdisplayがオーバーライドされています)。モーダルヘッダー、モーダルボディ (paddingに必要)、およびモーダルフッター (オプション) が含まれています。可能な場合は常に、モーダルヘッダーに破棄アクションを含めるか、別の明示的な破棄アクションを提供することをお勧めします。

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

ライブデモ

下のボタンをクリックして、動作するモーダルデモを切り替えます。ページの上部からスライドダウンし、フェードインします。

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

静的な背景

背景が静的に設定されている場合、モーダルの外側をクリックしてもモーダルは閉じません。試すには、下のボタンをクリックしてください。

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

長いコンテンツのスクロール

モーダルがユーザーのviewportまたはデバイスに対して長すぎる場合、ページ自体とは独立してスクロールします。以下のデモを試して、その意味を確認してください。

以下は、このモーダルダイアログのプレースホルダーテキストです。ロゼ、シルバーレイクの太陽を飲みながら、すべてだらだらと出てくる。今、それはあなたの手のひらにあります。それで、私たちは大通りに繰り出します。願い事をしてください。私はそれを毎日あなたの誕生日のようにします。あなたはすでに6フィート下に埋まっていると感じたことはありますか？大きな風船を取り出す時が来ました。あなたは最大級になれたはずです。パスポートスタンプ、彼女はコスモポリタンです。あなたのキスは宇宙的で、あらゆる動きが魔法です。

私たちは人生を送っています。私たちは正しく行っています。心を開いてください。私はそれをヒットしてやめようとしていました。彼女の愛はドラッグのようなものです。常に星屑の痕跡を残します。その女の子はフリークです。彼女はラグナビーチでジープを運転します。上質で、新鮮で、激しい、私たちはそれをロックしています。私の女の子は皆、ヴィンテージシャネルベイビーです。

あなたが私に会う前は大丈夫でしたが、少し重かった。桃色の唇、ええ、誰もがじっと見ています。これは大したことではありません。私の名前を呼ぶ。あなたの中毒を書き直すことができたはずです。彼女はそれを持っています。言葉では言い表せない、あなたはそれを知っています。王冠をかぶる頭は重い。だって、ベイビー、あなたは花火だから。雷のように地面を揺らす。

7月4日のように夜を所有してください！私は彼女を昏睡状態にするつもりです。何を待っていますか、見せつける時が来ました。何百万もの指輪であなたを置き換えることはできません。あなたは私の目を開き、私は行く準備ができています。私を光に導いてください。そしてここにあなたがいます。私は彼女を昏睡状態にするつもりです。さあ、あなたの色を爆発させましょう。だから目を覆ってください。私は驚きがあります。私が違うビートに合わせて一人で歩くとき。部屋中キラキラ、プールにピンクのフラミンゴ。

光を点火して輝かせるだけです！ありのままのあなたで私のところに来てください。7月4日のように夜を所有してください。あなたの愛で私を感染させ、あなたの毒で私を満たしてください。ありのままのあなたで私のところに来てください。虹の終わりは宝物に見える。

眠れない、逃げよう、二度と振り返らない、二度と振り返らない。眠れない、逃げよう、二度と振り返らない、二度と振り返らない。そう、私たちは天使を泣かせ、上から地上に雨を降らせます。私は(今夜)空を歩いています。肌に密着したジーンズであなたに私に触れさせます。ミツバチのように刺す私は私のストライプを稼ぎました。私はゼロから、私自身のヒーローになりました。月、月、月よりもさらに明るく。あなたが空を撃つとき、彼らに「ああ、ああ、ああ」と叫ばせてください！なぜ立ち寄らせてくれないの？

ブーン、ブーン、ブーン。一度もまばたきさせなかった。ええ、彼女の飛行機に乗っていれば幸運です。まるで手がかりがあるかのように、私たちの未来について話してください。ああ、なんてこった、大げさではありません。あなたはオリジナルで、置き換えることはできません。その女の子はフリークです。彼女はラグナビーチでジープを運転します。大したことじゃない、大したことじゃない、大したことじゃない。別の人生で私はあなたを滞在させるでしょう。私は肌に密着したジーンズであなたの心をレースさせるつもりです。あなたの波長を歩き、あなたが振動するときにそこにいたい。一度もまばたきさせなかった。

私たちはすべての約束を守り、世界に対して私たちになるでしょう。チャンスがあれば、彼女を捕まえた方がいいでしょう。大きな、大きな、大きな、大きな、大きな、大きな風船を取り出す時が来ました。健康的な食欲を持っていることを願っています。偉大さに落ち込まないでください、ああ、ああ、ええ。ええ、彼女は気まぐれで、とても自由気ままでしょう。私は顎が落ちる、目が飛び出す、頭が回転する、体が衝撃を受けるのを望んでいます。虹の終わりは宝物に見える。

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

以下は、このモーダルダイアログのプレースホルダーテキストです。光を点火して輝かせるだけです！ありのままのあなたで私のところに来てください。7月4日のように夜を所有してください。あなたの愛で私を感染させ、あなたの毒で私を満たしてください。ありのままのあなたで私のところに来てください。虹の終わりは宝物に見える。

私たちはすべての約束を守り、世界に対して私たちになるでしょう。別の人生で私はあなたの女の子になるでしょう。私たちは死ぬまで踊ることができます。あなたと私は永遠に若いままでしょう。そして私の18歳の誕生日に、私たちはマッチングタトゥーを入れました。だから心を開いて、始めましょう。だって彼女はミューズでありアーティストだから。彼女はあなたの心をむさぼり食います。ジェフリー・ダーマーのように（ウー）。紙吹雪を飛び散らせてください。（これが私たちのやり方です）1つの火花が世界に衝撃を与えることを知っています、ええ、ええ。もしあなたが未来が何を持っているのかを知っていたら。

ロゼ、シルバーレイクの太陽を飲みながら、すべてだらだらと出てくる。今、それはあなたの手のひらにあります。それで、私たちは大通りに繰り出します。願い事をしてください。私はそれを毎日あなたの誕生日のようにします。あなたはすでに6フィート下に埋まっていると感じたことはありますか？大きな風船を取り出す時が来ました。あなたは最大級になれたはずです。パスポートスタンプ、彼女はコスモポリタンです。あなたのキスは宇宙的で、あらゆる動きが魔法です。

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

垂直方向の中央揃え

モーダルを垂直方向に中央揃えにするには、.modal-dialogに.modal-dialog-centeredを追加します。

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

ツールチップとポップオーバー

ツールチップとポップオーバーは、必要に応じてモーダル内に配置できます。モーダルが閉じられると、内部のツールチップとポップオーバーもすべて自動的に破棄されます。

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

グリッドの使用

.modal-body内に.container-fluidをネストすることで、モーダル内でBootstrapグリッドシステムを利用します。次に、他の場所と同様に通常のグリッドシステムクラスを使用します。

<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-*属性(場合によってはjQueryを介して)を使用すると、どのボタンがクリックされたかに応じて、モーダルのコンテンツを変化させることができます。

以下はライブデモで、その後にHTMLとJavaScriptの例が続きます。詳細については、relatedTargetの詳細については、モーダルイベントのドキュメントを参照してください。

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

アニメーションの変更

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

例えばズームインのアニメーションが必要な場合は、$modal-fade-transform: scale(.8)を設定できます。

アニメーションの削除

モーダルをフェードイン表示させるのではなく、単に表示させたい場合は、モーダルマークアップから.fadeクラスを削除してください。

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

動的な高さ

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

アクセシビリティ

モーダルのタイトルを参照するaria-labelledby="..."を.modalに追加するようにしてください。さらに、.modalにaria-describedbyを使用してモーダルダイアログの説明を記述することもできます。JavaScriptで追加するため、role="dialog"を追加する必要はありません。

YouTube動画の埋め込み

モーダルにYouTube動画を埋め込むには、再生を自動的に停止させるなど、Bootstrapにはない追加のJavaScriptが必要です。詳しくは、このStack Overflowの投稿をご覧ください。

オプションのサイズ

モーダルには3つのオプションのサイズがあり、.modal-dialogに適用するmodifierクラスで利用できます。これらのサイズは、狭いビューポートで水平スクロールバーが発生しないように、特定のブレークポイントで有効になります。

サイズ	クラス	モーダルの最大幅
小	`.modal-sm`	`300px`
デフォルト	なし	`500px`
大	`.modal-lg`	`800px`
特大	`.modal-xl`	`1140px`

modifierクラスのないデフォルトのモーダルは、「中」サイズのモーダルを構成します。

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

使い方

モーダルプラグインは、データ属性またはJavaScriptを介して、必要に応じて非表示のコンテンツを切り替えます。また、デフォルトのスクロール動作をオーバーライドするために<body>に.modal-openを追加し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリックエリアを提供する.modal-backdropを生成します。

データ属性による方法

JavaScriptを書かずにモーダルをアクティブ化します。ボタンなどのコントローラー要素にdata-toggle="modal"を設定し、切り替え対象の特定のモーダルを指定するためにdata-target="#foo"またはhref="#foo"を追加します。

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

JavaScriptによる方法

JavaScriptの1行でidがmyModalのモーダルを呼び出します。

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

オプション

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

名前	型	デフォルト	説明
backdrop	boolean または文字列 `'static'`	true	modal-backdrop要素を含みます。または、クリック時にモーダルを閉じないbackdropには`static`を指定します。
keyboard	boolean	true	Escキーが押されたときにモーダルを閉じます
focus	boolean	true	初期化時にモーダルにフォーカスを当てます。
show	boolean	true	初期化時にモーダルを表示します。

メソッド

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

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

詳細については、JavaScriptのドキュメントをご覧ください。.

`.modal(options)`

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

$('#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')`

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

イベント

Bootstrapのモーダルクラスは、モーダル機能にフックするためのいくつかのイベントを公開しています。すべてのモーダルイベントは、モーダル自体（つまり、<div class="modal">）で発生します。

イベントタイプ	説明
show.bs.modal	このイベントは、`show`インスタンスメソッドが呼び出された直後に発生します。クリックによって発生した場合、クリックされた要素はイベントの`relatedTarget`プロパティとして利用できます。
shown.bs.modal	このイベントは、モーダルがユーザーに表示されたときに発生します（CSSトランジションが完了するまで待機します）。クリックによって発生した場合、クリックされた要素はイベントの`relatedTarget`プロパティとして利用できます。
hide.bs.modal	このイベントは、`hide`インスタンスメソッドが呼び出された直後に発生します。
hidden.bs.modal	このイベントは、モーダルがユーザーに非表示になったときに発生します（CSSトランジションが完了するまで待機します）。
hidePrevented.bs.modal	このイベントは、モーダルが表示され、そのbackdropが`static`であり、モーダルの外側をクリックするか、キーボードオプションまたは`data-keyboard`が`false`に設定されている状態でEscキーを押した場合に発生します。

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