モーダル Modal

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

On this page

仕組み

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

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

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

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

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

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

例

以下は、static modal の例です(つまり、position と display がオーバーライドされています)。modal header、modal body(padding に必要)、および modal footer(オプション)が含まれています。可能な限り、閉じるアクションを含む modal header を含めるか、別の明示的な閉じるアクションを提供することをお勧めします。

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

上記の static の例では、ドキュメントページの見出し階層の問題を避けるために <h5> を使用しています。ただし、構造的には、modal dialog は独自の個別のドキュメント/コンテキストを表すため、.modal-title は理想的には <h1> であるべきです。必要に応じて、フォントサイズユーティリティを使用して見出しの外観を制御できます。以下のすべてのライブ例では、このアプローチを使用しています。

ライブデモ

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

<!-- 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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <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

backdrop が static に設定されている場合、modal の外側をクリックしても閉じません。以下のボタンをクリックして試してみてください。

<!-- 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">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <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>

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

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

.modal-dialog に .modal-dialog-scrollable を追加することで、modal body のスクロールを許可するスクロール可能な modal を作成することもできます。

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

垂直方向の中央揃え

.modal-dialog に .modal-dialog-centered を追加して、modal を垂直方向に中央揃えにします。

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

Tooltip と popover は、必要に応じて modal 内に配置できます。Modal が閉じられると、その中にあるすべての tooltip と popover も自動的に閉じられます。

<div class="modal-body">
  <h2 class="fs-5">Popover in a modal</h2>
  <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
  <hr>
  <h2 class="fs-5">Tooltips in a modal</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Grid の使用

.modal-body 内に .container-fluid をネストすることで、modal 内で Bootstrap の grid system を利用できます。その後、他の場所と同じように通常の grid system クラスを使用します。

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

わずかに異なるコンテンツで同じ modal をトリガーするボタンが多数ありますか? どのボタンがクリックされたかに応じて modal のコンテンツを変更するには、event.relatedTarget と HTML data-bs-* 属性を使用します。

以下は、HTML と JavaScript の例が続くライブデモです。詳細については、relatedTarget の詳細について modal イベントのドキュメントをお読みください。

html

<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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
        <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>

site/src/assets/partials/snippets.js

const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const 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.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

data-bs-target と data-bs-toggle 属性を巧みに配置することで、複数の modal 間を切り替えます。たとえば、すでに開いているサインイン modal 内からパスワードリセット modal を切り替えることができます。複数の modal を同時に開くことはできません—この方法は単に2つの個別の modal 間を切り替えるだけです。

html

<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">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <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">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">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <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">Back to first</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>

アニメーションの変更

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

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

アニメーションの削除

フェードインではなく単に表示される modal の場合は、modal のマークアップから .fade クラスを削除します。

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

動的な高さ

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

アクセシビリティ

.modal に modal のタイトルを参照する aria-labelledby="..." を追加してください。さらに、.modal に aria-describedby を使用して modal dialog の説明を追加できます。JavaScript 経由ですでに追加しているため、role="dialog" を追加する必要はありません。

YouTube 動画の埋め込み

Modal に YouTube 動画を埋め込むには、再生を自動的に停止するなどのために、Bootstrap にはない追加の JavaScript が必要です。詳細については、この役立つ Stack Overflow の投稿をご覧ください。

オプションのサイズ

Modal には、.modal-dialog に配置する修飾クラスを介して利用できる3つのオプションのサイズがあります。これらのサイズは、狭いビューポートで横方向のスクロールバーを回避するために、特定のブレークポイントで有効になります。

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

修飾クラスのないデフォルトの modal は「medium」サイズの modal を構成します。

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

もう1つのオーバーライドは、.modal-dialog に配置される修飾クラスを介して利用できる、ユーザーのビューポートをカバーする modal をポップアップするオプションです。

Class	Availability
`.modal-fullscreen`	Always
`.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`

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

CSS

変数

Added in v5.2.0

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

scss/_modal.scss

--#{$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}; // Todo in v6: Split this padding into x and 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

--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass 変数

scss/_variables.scss

$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:                  var(--#{$prefix}body-bg);
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        var(--#{$prefix}border-width);
$modal-content-border-radius:       var(--#{$prefix}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; // Keep this for backwards compatibility

$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);

Sass ループ

レスポンシブな全画面 modal は、$breakpoints マップと scss/_modal.scss のループを介して生成されます。

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,
      .modal-footer {
        @include border-radius(0);
      }

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

使用方法

Modal プラグインは、データ属性または JavaScript を介して、オンデマンドで非表示のコンテンツを切り替えます。また、デフォルトのスクロール動作をオーバーライドし、.modal-backdrop を生成して、modal の外側をクリックしたときに表示されている modal を閉じるためのクリック領域を提供します。

データ属性経由

切り替え

JavaScript を書かずに modal をアクティブ化します。ボタンなどのコントローラー要素に data-bs-toggle="modal" を設定し、data-bs-target="#foo" または href="#foo" と一緒に、切り替える特定の modal をターゲットにします。

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

閉じる

以下のように、modal内のボタンにdata-bs-dismiss属性を指定することで閉じることができます:

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

または、以下のように、modalの外側のボタンに追加のdata-bs-targetを使用することもできます:

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

Modal を閉じる両方の方法がサポートされていますが、modal の外側から閉じることは ARIA Authoring Practices Guide dialog (modal) pattern と一致しないことに注意してください。自己責任で行ってください。

JavaScript 経由

1行の JavaScript で modal を作成します:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

オプション

オプションはdata属性またはJavaScriptを介して渡すことができます。data-bs-にオプション名を追加できます。例: data-bs-animation="{value}"。data属性を介してオプションを渡す場合は、オプション名の大文字小文字を"camelCase"から"kebab-case"に変更してください。例えば、data-bs-customClass="beautifier"の代わりにdata-bs-custom-class="beautifier"を使用します。

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

最終的な設定オブジェクトは、data-bs-config、data-bs-、およびjs objectのマージされた結果であり、最後に指定されたキー値が他の値を上書きします。

Name	Type	Default	Description
`backdrop`	boolean, `'static'`	`true`	modal-backdrop 要素を含めます。または、クリックしても modal が閉じない backdrop の場合は `static` を指定します。
`focus`	boolean	`true`	初期化時に modal にフォーカスを置きます。
`keyboard`	boolean	`true`	エスケープキーが押されたときに modal を閉じます。

メソッド

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに呼び出し元に戻りますが、終了する前に戻ります。さらに、トランジション中のコンポーネントに対するメソッド呼び出しは無視されます。JavaScriptドキュメントで詳細を確認してください。

オプションの渡し方

コンテンツを modal としてアクティブ化します。オプションの object を受け入れます。

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

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

イベント

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

Event	Description
`hide.bs.modal`	このイベントは、`hide` インスタンスメソッドが呼び出されたときにすぐに発生します。`event.preventDefault()` を呼び出すことで防ぐことができます。イベントの防止の詳細については、JavaScript イベントのドキュメントをご覧ください。
`hidden.bs.modal`	このイベントは、modal がユーザーから非表示になり終わったときに発生します(CSS トランジションが完了するまで待機します)。
`hidePrevented.bs.modal`	このイベントは、modal が表示され、その backdrop が `static` で、modal の外側がクリックされたときに発生します。エスケープキーが押され、`keyboard` オプションが `false` に設定されている場合にも発生します。
`show.bs.modal`	このイベントは、`show` インスタンスメソッドが呼び出されたときにすぐに発生します。クリックによって引き起こされた場合、クリックされた要素はイベントの `relatedTarget` プロパティとして利用できます。
`shown.bs.modal`	このイベントは、modal がユーザーに表示されたときに発生します(CSS トランジションが完了するまで待機します)。クリックによって引き起こされた場合、クリックされた要素はイベントの `relatedTarget` プロパティとして利用できます。

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

モーダル Modal

仕組み

例

Modal コンポーネント

Modal title

ライブデモ

Static backdrop

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

垂直方向の中央揃え

Tooltip と Popover

Grid の使用

Modal コンテンツの変更

Modal 間の切り替え

アニメーションの変更

アニメーションの削除

動的な高さ

アクセシビリティ

YouTube 動画の埋め込み

オプションのサイズ

全画面 Modal

CSS

変数

Sass 変数

Sass ループ

使用方法

データ属性経由

切り替え

閉じる

JavaScript 経由

オプション

メソッド

オプションの渡し方

イベント