モーダル
Bootstrap の JavaScript モーダル プラグインを使用して、サイトにダイアログを追加して、ライトボックス、ユーザー通知、または完全にカスタム コンテンツを表示します。
使い方
メニュー オプションが最近変更されたため、Bootstrap のモーダル コンポーネントを使い始める前に、必ず以下をお読みください。
- モーダルは、HTML、CSS、および JavaScript で構築されます。ドキュメント内の他のすべての上に配置され、スクロールを削除して
<body>
、モーダル コンテンツが代わりにスクロールするようにします。 - モーダルの「背景」をクリックすると、モーダルが自動的に閉じます。
- Bootstrap は、一度に 1 つのモーダル ウィンドウのみをサポートします。ネストされたモーダルは、ユーザー エクスペリエンスが低下すると考えられるため、サポートされていません。
- モーダルは を使用します
position: fixed
。これは、レンダリングに関して少し特殊な場合があります。可能な限り、モーダル HTML を最上位の位置に配置して、他の要素からの潜在的な干渉を回避します。.modal
別の固定要素内に a をネストすると、問題が発生する可能性があります。 - もう一度
position: fixed
言いますが、モバイル デバイスでモーダルを使用する際にはいくつかの注意事項があります。詳細については、ブラウザのサポート ドキュメントを参照してください。 - HTML5 がセマンティクスを定義する方法により、
autofocus
HTML 属性は Bootstrap モーダルでは効果がありません。同じ効果を得るには、カスタム JavaScript を使用します。
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.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="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>
ライブデモ
下のボタンをクリックして、動作中のモーダル デモを切り替えます。ページの上部から下にスライドしてフェードインします。
<!-- 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>
静的な背景
背景が静的に設定されている場合、モーダルの外側をクリックしてもモーダルは閉じません。下のボタンをクリックしてお試しください。
<!-- 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>
長いコンテンツのスクロール
ユーザーのビューポートまたはデバイスに対してモーダルが長くなりすぎると、ページ自体とは無関係にスクロールします。以下のデモを試して、私たちが意味することを確認してください。
.modal-dialog-scrollable
に追加することで、モーダル本体をスクロールできるスクロール可能なモーダルを作成することもできます.modal-dialog
。
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
垂直方向に中央揃え
モーダルを垂直方向に中央揃えに追加.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>
ツールチップとポップオーバー
ツールチップとポップオーバーは、必要に応じてモーダル内に配置できます。モーダルが閉じられると、その中のツールチップとポップオーバーも自動的に閉じられます。
<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>
グリッドの使用
.container-fluid
内でネストすることにより、モーダル内で Bootstrap グリッド システムを利用し.modal-body
ます。次に、他の場所と同じように、通常のグリッド システム クラスを使用します。
<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>
さまざまなモーダル コンテンツ
内容がわずかに異なる同じモーダルをすべてトリガーするボタンがたくさんありますか? event.relatedTarget
およびHTMLdata-bs-*
属性を使用して、クリックされたボタンに応じてモーダルの内容を変更します。
以下はライブ デモで、HTML と JavaScript の例が続きます。詳細については、モーダル イベントのドキュメントを参照してくださいrelatedTarget
。
<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
})
モーダルを切り替える
data-bs-target
およびdata-bs-toggle
属性を巧妙に配置して、複数のモーダルを切り替えます。たとえば、既に開いているサインイン モーダル内からパスワード リセット モーダルを切り替えることができます��複数のモーダルを同時に開くことはできないことに注意してください。このメソッドは、2 つの個別のモーダルを切り替えるだけです。
<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>
アニメーションを変更
変数はモーダル フェードイン アニメーションの前$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.handleUpdate()
開いているモーダルの高さが変更された場合、スクロールバーが表示された場合にモーダルの位置を再調整するために呼び出す必要があります。
アクセシビリティ
aria-labelledby="..."
モーダル タイトルを参照して、 にを必ず追加してください.modal
。さらに、モーダル ダイアログの説明をaria-describedby
on で指定でき.modal
ます。role="dialog"
JavaScript を使用して既に追加しているため、追加する必要はありません。
YouTube 動画の埋め込み
モーダルに YouTube 動画を埋め込むには、再生を自動的に停止するなど、Bootstrap にはない追加の JavaScript が必要です。詳細については、このスタック オーバーフローの投稿を参照してください。
オプションサイズ
モーダルには 3 つのオプションのサイズがあり、修飾子クラスを介して に配置できます.modal-dialog
。これらのサイズは、特定のブレークポイントで開始され、狭いビューポートでの水平スクロールバーを回避します。
サイズ | クラス | モーダル最大幅 |
---|---|---|
小さな | .modal-sm |
300px |
デフォルト | なし | 500px |
大きい | .modal-lg |
800px |
特大 | .modal-xl |
1140px |
修飾子クラスのないデフォルトのモーダルは、「中」サイズのモーダルを構成します。
<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-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 |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
サス
変数
$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);
ループ
レスポンシブ フルスクリーン モーダル$breakpoints
は、マップと のループを介して生成され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);
}
}
}
}
使用法
モーダル プラグインは、データ属性または JavaScript を介して、非表示のコンテンツをオンデマンドで切り替えます。また、デフォルトのスクロール動作をオーバーライド.modal-backdrop
し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する を生成します。
データ属性経由
JavaScript を書かずにモーダルを有効にします。特定のモーダルを切り替え対象にするために、 ordata-bs-toggle="modal"
とともに、ボタンなどのコントローラー要素に設定します。data-bs-target="#foo"
href="#foo"
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
JavaScript 経由
JavaScript の 1 行でモーダルを作成します。
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
オプション
オプションは、データ属性または JavaScript を介して渡すことができます。data-bs-
データ属性の場合、オプション名をのようにに追加しますdata-bs-backdrop=""
。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
backdrop |
ブール値または文字列'static' |
true |
モーダル背景要素が含まれています。static または、クリック時にモーダルを閉じない背景を指定します。 |
keyboard |
ブール値 | true |
エスケープキーが押されたときにモーダルを閉じます |
focus |
ブール値 | true |
初期化時にモーダルにフォーカスを置きます。 |
メソッド
非同期メソッドと遷移
すべての API メソッドは非同期であり、遷移を開始します。トランジションが開始されるとすぐに呼び出し元に戻りますが、トランジションが終了する前に戻ります。さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。
受け渡しオプション
コンテンツをモーダルとしてアクティブにします。オプションのオプションを受け入れますobject
。
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
トグル
モーダルを手動で切り替えます。モーダルが実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。shown.bs.modal
hidden.bs.modal
myModal.toggle()
見せる
モーダルを手動で開きます。モーダルが実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.modal
myModal.show()
relatedTarget
また、モーダル イベントで (プロパティとして) 受け取ることができる引数として DOM 要素を渡すこともできます。
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
隠れる
モーダルを手動で非表示にします。モーダルが実際に非表示になる前 (つまり、イベントが発生する前)に呼び出し元に戻ります。hidden.bs.modal
myModal.hide()
ハンドル更新
モーダルが開いている間にモーダルの高さが変化した場合 (つまり、スクロールバーが表示された場合) は、モーダルの位置を手動で再調整します。
myModal.handleUpdate()
廃棄
要素のモーダルを破棄します。(DOM要素に格納されたデータを削除します)
myModal.dispose()
getInstance
DOM 要素に関連付けられたモーダル インスタンスを取得できる静的メソッド
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
DOM 要素に関連付けられたモーダル インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
イベント
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 |
このイベントは、モーダルが表示され、その背景が表示され、static モーダルの外側をクリックするか、キーボード オプションまたはdata-bs-keyboard に設定されたエスケープ キーが押されたときに発生しfalse ます。 |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})