モーダル（Modal） v5.0.0-beta1設定変更

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。

このページの項目 v5.0.0-beta1設定変更

使い方（How it works）

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

モーダルは、HTML、CSS、JavaScriptで構築。ドキュメント内の他の部分に配置され、<body> からスクロールを削除して、代わりにモーダルコンテンツをスクロールする。
モーダルの"backdrop"（背景部分）をクリックすると、自動的にモーダルが閉じる。
Bootstrapは一度に1つのモーダルウィンドウしかサポートしない。入れ子になったモーダルは、ユーザー経験が乏しいと思われるためサポートされていない。
モーダルは、position: fixed を使用。これは、そのレンダリングに関してちょっと変わったことがある。できれば、他の要素からの干渉を避けるために、モーダルHTMLを最上位に配置して下さい。他の固定要素内で .modal を入れ子になったときに問題に遭遇する可能性がある。
再度、position: fixed のために、モバイルデバイス上のモーダル使用に関するいくつかの注意点がある。詳細は、ブラウザ・サポートの解説に記載。
HTML5がそのセマンティクスをどのように定義するかによって、autofocus HTML属性は、Bootstrapのモーダルには何の影響も与えない。同じ効果を得るためにカスタムJavaScriptを使用 v5.0.0-alpha1設定変更：

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

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

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

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

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

※Bootstrap4.xの設定例

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

このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。

実例の見本と使用方法を以下のガイドラインに記載。

実例（Examples）

以下は静的モーダルの例（position と display が再定義されたことを意味する）。モーダルヘッダ、モーダルボディ（padding に必要）、モーダルフッタ（オプション）が含まれます。できる限り、アクションを終了するモーダルヘッダを含めるか、別の明示的な却下アクションの提供を推奨。

見本モーダルを開いた状態で表示

Bootstrap5.xの設定例緑背景が変更箇所

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div><!-- /.modal-header -->
      <div class="modal-body">
        <p>モーダルボディの本文。</p>
      </div><!-- /.modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

※Bootstrap4.xの設定例赤背景が変更箇所

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!-- /.modal-header -->
      <div class="modal-body">
        <p>モーダルボディの本文。</p>
      </div><!-- /.modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【設定】

div.modal > div.modal-dialog > div.modal-content > {div.modal-header > h5.modal-title《タイトル》 + button.btn-close《閉じるアイコンボタン》}《ヘッダ》 + div.modal-body《コンテンツ》 + div.modal-footer《フッタ》
ヘッダ（.modal-header）は、《タイトル》（.modal-title）⇒《閉じるアイコンボタン》（button.close）の順に記載
プラグインを使ってモーダルを閉じるため、閉じるアイコンボタンや閉じるボタン部分には [data-bs-dismiss="modal"] を入れる

【アクセシビリティの設定】

モーダルを閉じるボタンとなる button.btn-close に、aria-label 属性（アイコンボタンのラベル）を入れる

【注意】

.modal に role="dialog" 属性【v4.5.1で変更】や .modal-dialog に role="document" 属性【v4.5.0で変更】の追加は不要（モーダルを表示する際にスクリプトで .modal に role="dialog" と aria-modal="true" が自動的に挿入されるため）

【変更履歴】

【v5.0.0-alpha2】
- 閉じるボタンの設定の変更（.close ⇒ .btn-close、span[aria-hidden="true"] > × が不要に）
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - モーダルを閉じる：[data-dismiss="modal"] ⇒ [data-bs-dismiss="modal"]
【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更

上記の静的モーダルの実例では、ドキュメントページの見出し階層の問題を避けるために、<h5> を使用している。しかし構造的には、モーダルダイアログはそれ自身の独立したドキュメント/コンテキストを表すので、.modal-title は理想的には <h1> であるべき。必要であれば、フォントサイズユーティリティを使用して、見出しの外観を制御することができる。以降の実例の見本はすべてこの方法を使用している。

モーダルの設定（Live demo）v5.2.2設定変更

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

見本

Bootstrap5.xの設定例緑背景が変更箇所

<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  ココを押すと表示
</button>

<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">モーダルのタイトル</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <p>モーダルのコンテンツ文。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【設定】

button.btn《切替ボタン》 + 〔div.modal.fade[role="dialog"] > div.modal-dialog[role="document"] > div.modal-content > {div.modal-header > h1.modal-title《タイトル》 + button.btn-close[data-bs-dismiss="modal"][aria-label="閉じる"]《閉じるアイコンボタン》}《ヘッダ》 + div.modal-body《コンテンツ》 + div.modal-footer《フッタ》〕《モーダル部分》
モーダルのプラグインを使用するため、
- 切替ボタンには、[data-bs-toggle="modal"]（プラグインを有効にする）と、モーダルのID"] か [href="#モーダルのID"]
- div.modal（ボタンのリンク先）には、id="ID名" と tabindex="-1"（Esc を押すとモーダルが閉じるようにする）
をそれぞれ入れること

【アクセシビリティの設定】

h1.modal-title に id="ID名" を入れ、div.modal に aria-labelledby="タイトルのID" 属性（タイトルをモーダルのラベルとして関連付ける）を入れること
さらに div.modal に aria-describedby 属性を入れてモーダルダイアログの説明をすることも可能
切替ボタン部分には、
- aria-expanded="false" 属性（支援技術に要素の開閉の状態を伝える）
- aria-controls="コンテンツのID" 属性（リンク/ボタンリンク/ボタンとコンテンツの関連付け）
- コントロールが a.btn の場合は、role="button"（支援技術にボタンの役割を伝える）
を入れる

【変更履歴】

【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="modal"] ⇒ [data-bs-toggle="modal"]
  - [data-target="#モーダルのID"] ⇒ [data-bs-target="#モーダルのID"]
  - [data-dismiss="modal"] ⇒ [data-bs-dismiss="modal"]
【v5.2.2】
- タイトル：h5.modal-title ⇒ h1.modal-title.fs-5

静的な背景（Static backdrop）

背景を静的に設定した場合は、モーダルの外側をクリックしてもモーダルは閉じられない。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  ココを押すと表示
</button>

<!-- モーダルの設定 -->
<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">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">モーダルのタイトル</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">了解</button>
      </div>
    </div>
  </div>
</div>

【設定】

.modal に [data-bs-backdrop="static"] を追加
Esc を押しても閉じないようにするには、さらに [data-bs-keyboard="false"] を追加

【変更履歴】

【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-backdrop="static"] ⇒ [data-bs-backdrop="static"]
  - [data-keyboard="false"] ⇒ [data-bs-keyboard="false"]

長いコンテンツのスクロール（Scrolling long content）

1.モーダル自体をスクロール

モーダルがユーザーのビューポートやデバイスにとって長すぎると、モーダルはページ自体とは独立してスクロール。以下の見本で試して、どういう意味か確認して下さい。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLongTitle">モーダルのタイトル</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div>
    </div>
  </div>
</div>

2.スクロールバーを表示

.modal-dialog-scrollable を .modal-dialog に追加すれば、モーダル本体をスクロールできる。

見本

設定例

<!-- スクロール可能なモーダル -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

垂直方向に中央に配置（Vertically centered）

.modal-dialog-centered を .modal-dialog に追加して、モーダルを垂直方向に中央に配置。

見本

設定例

垂直方向に中央揃えのモーダル<!-- 垂直方向に中央揃えのモーダル -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

垂直方向にスクロール可能なモーダル<!-- 垂直方向にスクロール可能なモーダル -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

【設定】

垂直方向に中央揃えのモーダル：.modal-dialog に .modal-dialog-centered を追加
垂直方向にスクロール可能なモーダル：.modal-dialog に .modal-dialog-centered.modal-dialog-scrollable を追加

ツールチップとポップオーバー（Tooltips and popovers）v5.2.2設定変更

ツールチップとポップオーバーを必要に応じてモーダル内に配置。モーダルが閉じられると、内のツールヒントやポップオーバーも自動的に閉じられる。

見本

Bootstrap5.xの設定例緑背景が5.2.0以降の変更箇所

HTML<div class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalPopoversLabel">モーダルのタイトル</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <h2 class="fs-5">モーダル内のポップオーバー</h2>
        <p>この<a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="ポップオーバーのタイトル" data-bs-content="ポップオーバーのコンテンツ。もう一度ボタンを押すと非表示になります。">ボタン</a> を押すとポップオーバーが表示されます。</p>
        <h2 class="fs-5">モーダル内のツールチップ</h2>
        <p><a href="#" data-bs-toggle="tooltip" title="ツールチップ1の表示">このリンク</a>と<a href="#" data-bs-toggle="tooltip" title="ツールチップ2の表示">このリンク</a>をホバーするとツールチップが表示されます。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div>
    </div>
  </div>
</div>

【設定】

モーダルの切替ボタンの部分にポップオーバーやツールチップの設定を追加

【変更履歴】

【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-content] ⇒ [data-bs-content]
【v5.2.0】
- .popover-test ⇒ [data-bs-toggle="popover"]、.tooltip-test ⇒ data-bs-toggle="tooltip"（実行コードはそれぞれポップオーバーとツールチップのものを使用し、独自の設定は不要に）
【v5.2.2】
- タイトル：h5.modal-title ⇒ h1.modal-title.fs-5
- .modal-body 内のタイトル：<h5> ⇒ h2.fs-5

グリッドを使用（Using the grid ）v5.0.0-beta1設定変更

.modal-body 内に .container-fluid を入れ子にして、モーダル内のBootstrapグリッドシステムを利用。次に、通常どおりのグリッドシステムクラスを使用。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="modal-body">
  <div class="container-fluid">
    <p>モーダルのコンテンツ</p>
    <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 mx-auto">.col-md-6 .mx-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        レベル 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            レベル 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            レベル 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【設定】

div.modal-body > div.container-fluid > div.row > div.col(-{breakpoint})-*（.m{s|e|x}(-{breakpoint})-auto）

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
  - .ml(-{breakpoint})-* ⇒ .ms(-{breakpoint})-*
  - .mr(-{breakpoint})-* ⇒ .me(-{breakpoint})-*

若干異なる内容で同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、event.relatedTarget 属性とHTML data-bs-* 属性を使用。

以下に見本とHTMLとJavaScriptの設定例を示す。relatedTarget の詳細は、モーダルイベントの解説に記載。

見本

Bootstrap5.xの設定例緑背景が変更箇所

HTML<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@president">社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@vice-president">副社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@officer">重役向けモーダルを開く</button>
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel2">新メッセージ</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name">受信者：</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text">メッセージ：</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">閉じる</button>
        <button type="button" class="btn btn-primary">送信</button>
      </div>
    </div>
  </div>
</div>

実行コード

Bootstrap5.2.xの設定例緑背景が5.2.0での変更箇所

JavaScriptconst exampleModal = document.getElementById('exampleModal2')
exampleModal.addEventListener('show.bs.modal', event => {
  // モーダルを起動するボタン
  const button = event.relatedTarget
  // data-bs-* 属性から情報を抽出
  const recipient = button.getAttribute('data-bs-whatever')
  // 必要に応じて、ここでAjaxリクエストを開始可能
  // その後コールバックで更新
  //
  // モーダルの内容を更新
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `${recipient}にメッセージを送信`
  modalBodyInput.value = recipient
})

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

JavaScriptvar exampleModal = document.getElementById('exampleModal2')
exampleModal.addEventListener('show.bs.modal', function (event) {
  var button = event.relatedTarget
  var recipient = button.getAttribute('data-bs-whatever')
  
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = recipient + 'にメッセージを送信'
  modalBodyInput.value = recipient
})

※Bootstrap4.xの設定例

JavaScript$('#exampleModal2').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('whatever')
  
  var modal = $(this)
  modal.find('.modal-title').text(recipient + 'にメッセージを送信')
  modal.find('.modal-body input').val(recipient)
})

【変更履歴】

【v5.0.0-alpha1】
- JavaScriptの記述をjQueryに依存しない方法に変更
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

モーダルの切替（Toggle between modals）v5.0.0-beta3新設、v5.1.2設定変更

data-bs-target 属性と data-bs-toggle 属性を巧妙に配置して、複数のモーダルを切り替える。例えば、すでに開いているサインインモーダル内からパスワードリセットモーダルに切り替えられる。複数のモーダルを同時に開くことはできないので注意。この方法では、2つの別々のモーダルの切り替えのみ。

見本

最初のモーダルを開く

Bootstrap5.xの設定例緑背景が変更箇所

<div class="modal fade" id="modal1" aria-hidden="true" aria-labelledby="modalLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalLabel">モーダル 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#modal2" data-bs-toggle="modal">モーダル2を開く</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="modalLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalLabel2">モーダル 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#modal1" data-bs-toggle="modal">モーダル1に戻る</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#modal1" role="button">最初のモーダルを開く</a>

【設定】

別々のモーダルダイアログ間で data-bs-target を設定

【変更履歴】

【v5.1.1】
- モーダル2にある「モーダル1に戻る」ボタンの設定から data-bs-dismiss="modal" を削除（v5.1.0で「モーダル1に戻る」ボタンを押してもモーダル1に戻らないバグが発生していたのを修正）
【v5.1.2】
- モーダル1にある「モーダル2を開く」ボタンの設定からも data-bs-dismiss="modal" を削除

アニメーションの変更（Change animation）

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

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

アニメーションの削除（Remove animation）

フェードインではなく、いきなり表示されるモーダルにする場合は、モーダルのマークアップから .fade クラスを削除。

見本

設定例

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

【設定】

.modal で .fade をはずす

動的な高さのモーダル（Modals with dynamic heights）

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

アクセシビリティ（Accessibility）

モーダルタイトルを参照する aria-labelledby="..." を .modal に必ず追加して下さい。さらに、モーダルダイアログの説明を .modal の aria-describedby で提供もできる。JavaScript経由で追加するので、role="dialog" をHTMLに追加する必要はない。

YouTube動画の埋め込み（Embedding YouTube videos）

YouTubeの動画をモーダルに埋め込むには、再生を自動的に停止するなどの追加のJavaScriptが必要。詳細は、このStack Overflowの便利な記事に記載。

YouTube IFrame Player APIを利用したYouTube動画の埋め込みの実例裏技、v5.1.1追加、v5.2.0JSファイルをES6に変更

モーダル起動ボタンを押すと動画が自動再生（音はミュート）し、ループ再生するように設定したい場合は、以下を参照して下さい。

YouTube IFrame Player APIで読み込んだ動画を自動で再生してループさせる（みかづきブログ・カスタム）

See the Pen Play YouTube in Bootstrap 5 Modal(ES6) by cccabinet (@cccabinet) on CodePen.

モーダルでアラート表示 ※裏技

見本

※閉じるボタンを押してモーダル（アラート）を閉じて下さい。

Bootstrap5.xの設定例緑背景が変更箇所

<button type="button" data-bs-toggle="modal" data-bs-target="#ModalAlert" class="btn btn-primary">ココを押す</button>

<div class="modal fade" id="ModalAlert" data-bs-backdrop="false" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content border-0">
      <div class="alert alert-warning alert-dismissible fade show mb-0" role="alert">
        <strong>注目!</strong> ここにアラートが表示されます。
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
    </div>
  </div>
</div>

【設定】

アラートを表示する際に背景がオーバーレイしないようにモーダル（.modal）に data-bs-backdrop="false" を入れる（そのため閉じるボタンか Esc を押してアラートを閉じる）
.modal > .modal-dialog > .modal-content.border-0（モーダルの設定）> .alert.alert-{themecolor}.alert-dismissible.mb-0[role="alert"] > {《アラート文》 + button.btn-close[data-bs-dismiss="modal"]《閉じるボタン》}（アラートの設定）

【注意】

閉じるボタンはモーダルを閉じるために data-bs-dismiss="modal" にすること
アラートの上下左右中央表示は .modal-dialog に .modal-dialog-centered を追加すれば可能

モーダルでトースト表示 ※裏技、v5.2.0設定変更

見本

※閉じるボタンを押してトーストを閉じて下さい。

Bootstrap5.xの設定例緑背景が変更箇所


<button type="button" data-bs-toggle="modal" data-bs-target="#ModalToast" class="btn btn-primary">ココを押す</button>

<div class="modal fade" id="ModalToast" data-bs-backdrop="false" tabindex="-1">
  <div class="modal-dialog" style="max-width:350px">
    <div class="modal-content border-0">
      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <img src="..." alt="" class="rounded me-2">
          <strong class="me-auto">Bootstrap</strong>
          <small>11分前</small>
          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="toast-body">
          ここにトーストが表示されます。
        </div>
      </div>
    </div>
  </div>
</div>

【設定】

トーストを表示する際に背景がオーバーレイしないようにモーダル（.modal）に data-bs-backdrop="false" を入れる（そのため閉じるボタンか Esc を押してトーストを閉じる）
.modal > .modal-dialog[style="max-width:350px"] > .modal-content.border-0（モーダルの設定）> div.toast > {div.toast-header > button.ms-2.mb-1.btn-close[data-bs-dismiss="modal"]《閉じるボタン》}《ヘッダ》 + div.toast-body《コンテンツ》（トーストの設定）

【注意】

閉じるボタンはモーダルを閉じるために data-bs-dismiss="modal" にすること（トーストを複数表示する場合は一番最後のトーストのみを data-bs-dismiss="modal" にしてモーダルを閉じるようにする）
トーストの上下左右中央表示は .modal-dialog に .modal-dialog-centered を追加すれば可能だが、右上表示には非対応

【変更履歴】

【v5.2.0】
- .modal-dialog.modal-sm ⇒ .modal-dialog[style="max-width:350px"]

モーダルの大きさ（Optional sizes）

モーダルには3つのオプションのサイズがあり、修飾クラスを使用して .modal-dialog に配置できる。これらのサイズは、狭いビューポートでの水平スクロールバーの出現を避けるために、特定のブレークポイントで実行される。

サイズ	クラス	極小 <576px	小 ≥576px	大 ≥992px	特大 ≥1200px
小	`.modal-sm`	`width: 100%`	`max-width: 300px`
デフォルト（中）	なし		`max-width: 500px`
大	`.modal-lg`			`max-width: 800px`
特大	`.modal-xl`			`max-width: 800px`	`max-width: 1140px`

修飾クラスを持たないデフォルトモーダルは、「中」サイズのモーダルを構成。

大きさの種類

特大：.modal-xl

大きめ：.modal-lg

小さめ：.modal-sm

参考：デフォルト

設定例

特大<div class="modal-dialog modal-xl">
  ...
</div>

大きめ<div class="modal-dialog modal-lg">
  ...
</div>

小さめ<div class="modal-dialog modal-sm">
  ...
</div>

【設定】

.modal-dialog に .modal-{size}（上記の「大きさの種類」から選択）を追加

もう一つの再定義オプションは、.modal-dialog に配置された修飾子クラスを経由して利用できるユーザービューポートをカバーするモーダルをポップアップする。

定義済クラスの種類

ブレークポイント	クラス名	フルスクリーンになるビューポートの範囲
常時	`.modal-fullscreen`	すべて
小より下	`.modal-fullscreen-sm-down`	`576px`以下
中より下	`.modal-fullscreen-md-down`	`768px`以下
大より下	`.modal-fullscreen-lg-down`	`992px`以下
特大より下	`.modal-fullscreen-xl-down`	`1200px`以下
超特大より下	`.modal-fullscreen-xxl-down`	`1400px`以下

見本

設定例

<!-- フルスクリーン・モーダル -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

【設定】

.modal-dialog に .modal-fullscreen-{breakpoint}-down（上記の「定義済クラスの種類」から選択）を追加

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、モーダルは、リアルタイムのカスタマイズを強化するために、.modal と .modal-backdrop でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_modal.scss 内 modal-css-vars の設定--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // v6のTodo：このpaddingをxとyに分割
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

scss/_modal.scss 内 modal-backdrop-css-vars の設定   --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 modal-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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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; // 下位互換性のためにこれを保持

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

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

レスポンシブフルスクリーンモーダルは、$breakpoints マップとscss/_modal.scssのループを経由して生成。

デフォルトの設定

scss/_modal.scss 内 modal-fullscreen-loop の設定@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-backdrop を生成する。

データ属性経由で（Via data attributes）

切替（Toggle）

JavaScriptを書かずにモーダルを有効にする。特定のモーダルを起動させるためには、data-bs-target="#foo" か href="#foo" とともに、ボタンのようなコントローラー要素に data-bs-toggle="modal" を設定して下さい。

ボタンで設定<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">モーダルを起動</button>

リンクで設定<a data-bs-toggle="modal" href="#myModal">モーダルを起動</a>

閉じる（Dismiss）v5.1.0追加

モーダルを閉じるには、下記のようにモーダル内のボタンの data 属性を使用して実行できる：

設定例

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>

または、下記のようにモーダルの外側のボタンで data-bs-target を使用して閉じることもできる：

設定例

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="閉じる"></button>

モーダルを閉じる2つの方法がサポートされているが、モーダルの外側のボタンから閉じる場合は、ARIA Authoring Practices Guide dialog (modal) patternと一致しないので注意。これは自己責任で行って下さい。

JavaScript経由で（Via JavaScript）v5.0.0-alpha1設定変更

1行のJavaScriptでモーダルを作成：

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

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

または

JavaScriptconst myModalAlternative = new bootstrap.Modal('#myModal', options)

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

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

※Bootstrap4.xの設定例

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

【変更履歴】

【v5.0.0-alpha1】
- JavaScriptの記述をjQueryに依存しない方法に変更
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

オプション（Options）

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）に変更して下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

名前	タイプ	デフォルト	説明
`backdrop`	boolean か string `'static'`	`true`	モーダルの背景をオーバーレイ表示にする `true`：有効／`false`：無効または、背景クリック時にモーダルを閉じないようにするには `static` を指定（実例は静的な背景に記載）
`focus`	boolean	`true`	初期化時にモーダルにフォーカスを移動 `true`：有効／`false`：無効
`keyboard`	boolean	`true`	`Esc` が押されたときにモーダルを閉じる `true`：有効／`false`：無効

【変更履歴】

【v5.0.0-beta1】
- show オプションを廃止（v5では新しいモーダル・インスタンスを作成すると、show プロパティは機能しなくなるため）

メソッド（Methods）v5.0.0-alpha1設定変更、追加

非同期メソッドと遷移

すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。

詳細については、Javascriptのドキュメントに記載。

引渡オプション（Passing options）

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

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

※Bootstrap4.xの設定例

JavaScript$('#myModal').modal({
  keyboard: false
})

メソッド	説明
`dispose`	要素のモーダルを破棄（DOM要素に保存されているデータを削除）。
`getInstance`	DOM要素に関連付けられたモーダル・インスタンスを取得できる静的メソッド。
`getOrCreateInstance` v5.0.2追加	DOM要素に関連付けられたモーダル・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
`handleUpdate`	モーダルの高さが開いているとき（つまり、スクロールバーが表示されているとき）に変更された場合は、モーダルの位置を手動で再調整する。
`hide`	モーダルを手動で非表示にする。モーダルが実際に非表示になる前（つまり、`hidden.bs.modal` イベントが発動する前）に呼び出し元に戻る。
`show`	モーダルを手動で開く。モーダルが実際に表示される前（つまり、`shown.bs.modal` イベント発動前）に呼び出し元に戻る。また、モーダルイベントで（`relatedTarget` プロパティとして）受け取ることができる引数としてDOM要素を渡すことができる。（つまり、`const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`）
`toggle`	モーダルを手動で切り替える。モーダルが実際に表示か非表示になる前（つまり、`shown.bs.modal` か `hidden.bs.modal` イベント発動前）に呼び出し元に戻る。

【変更履歴】

【v5.0.0-alpha1】
- $().modal('xxx') ⇒ modal.xxx()
- getInstance メソッドが追加
【v5.0.2】
- getOrCreateInstance メソッドが追加
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

イベント（Events）

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

イベントタイプ	説明
`hide.bs.modal`	`hide` のインスタンス・メソッドが呼び出されると直ちに発動。
`hidden.bs.modal`	モーダルがユーザーから非表示になったときに発動（完全にCSS遷移が完了するまで待機）。
`hidePrevented.bs.modal`	モーダルの `backdrop` オプションが `static` であり、モーダルが表示され、モーダルの外側をクリックされたときに発動。`keyboard` オプションが `false` に設定されている場合に `Esc` を押しても発動。
`show.bs.modal`	`show` のインスタンス・メソッドが呼び出されると直ちに発動。クリックによって発動した場合、クリックされた要素はイベントの `relatedTarget` プロパティとして使用可能。
`shown.bs.modal`	モーダルがユーザーに表示されたときに発動（完全にCSS遷移が完了するまで待機）。クリックによって発動した場合、クリックされた要素はイベントの `relatedTarget` プロパティとして使用可能。

使用例 v5.2.0設定変更

JavaScriptconst myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // 何かをする...
})

前のページ
リストグループ

次のページ
ナビゲーションバー

モーダル（Modal） v5.0.0-beta1設定変更

使い方（How it works）

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所

※Bootstrap4.xの設定例

実例（Examples）

モーダルコンテンツ（Modal components）v5.0.0-beta1設定変更、v5.2.0デザイン変更

見本 モーダルを開いた状態で表示

モーダルのタイトル

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【注意】

【変更履歴】

モーダルの設定（Live demo）v5.2.2設定変更

見本

モーダルのタイトル

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

静的な背景（Static backdrop）

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【変更履歴】

長いコンテンツのスクロール（Scrolling long content）

1.モーダル自体をスクロール

見本

Bootstrap5.xの設定例 緑背景が変更箇所

2.スクロールバーを表示

見本

設定例

垂直方向に中央に配置（Vertically centered）

見本

設定例

【設定】

ツールチップとポップオーバー（Tooltips and popovers）v5.2.2設定変更

見本

Bootstrap5.xの設定例 緑背景が5.2.0以降の変更箇所

【設定】

【変更履歴】

グリッドを使用（Using the grid ）v5.0.0-beta1設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【変更履歴】

様々なモーダルコンテンツ（Varying modal content）v5.2.0JavaScriptの設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

実行コード

Bootstrap5.2.xの設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所

※Bootstrap4.xの設定例

【変更履歴】

モーダルの切替（Toggle between modals）v5.0.0-beta3新設、v5.1.2設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【変更履歴】

アニメーションの変更（Change animation）

アニメーションの削除（Remove animation）

見本

設定例

【設定】

動的な高さのモーダル（Modals with dynamic heights）

アクセシビリティ（Accessibility）

YouTube動画の埋め込み（Embedding YouTube videos）

YouTube IFrame Player APIを利用したYouTube動画の埋め込みの実例 裏技、v5.1.1追加、v5.2.0JSファイルをES6に変更

モーダルでアラート表示 ※裏技

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【注意】

モーダルでトースト表示 ※裏技、v5.2.0設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【注意】

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

見本モーダルを開いた状態で表示

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が5.2.0以降の変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.2.xの設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

YouTube IFrame Player APIを利用したYouTube動画の埋め込みの実例裏技、v5.1.1追加、v5.2.0JSファイルをES6に変更

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景が5.2.0での変更箇所