使い方(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.xの設定例
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)
モーダルコンテンツ(Modal components)v5.0.0-beta1設定変更
以下は静的モーダルの例(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">×</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"]
- モーダルを閉じる:
モーダルの設定(Live demo)
下のボタンをクリックして、動作中のモーダルのデモを切り替える。ページの上からスライドしてフェードイン。
見本
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">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<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
>h5.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 を押すとモーダルが閉じるようにする)
- 切替ボタンには、
【アクセシビリティの設定】
h5.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"]
静的な背景(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">
<h5 class="modal-title" id="staticBackdropLabel">モーダルのタイトル</h5>
<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"]
,[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">
<h5 class="modal-title" id="exampleModalLongTitle">モーダルのタイトル</h5>
<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
に追加して、モーダルを垂直方向に中央に配置。
見本
設定例
垂直方向に中央揃えのモーダル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
を追加
モーダルの切替(Toggle between modals)v5.0.0-beta3新設
data-bs-target
属性と data-bs-toggle
属性を巧妙に配置して、複数のモーダルを切り替える。例えば、すでに開いているサインインモーダル内からパスワードリセットモーダルに切り替え可能にする。複数のモーダルを同時に開くことはできないので注意。この方法では、2つの別々のモーダルの切り替えのみ。
見本
設定例
<!-- 最初のモーダルダイアログ -->
<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">
<h5 class="modal-title" id="modalLabel">モーダル 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<!-- 2番目のダイアログに移動 -->
<button class="btn btn-primary" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル2を開く</button>
</div>
</div>
</div>
</div>
<!-- 2番目のモーダルダイアログ -->
<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">
<h5 class="modal-title" id="modalLabel2">モーダル 2</h5>
<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" data-bs-dismiss="modal">モーダル1に戻る</button>
</div>
</div>
</div>
</div>
<!-- 最初のダイアログを開く -->
<a class="btn btn-primary" data-bs-toggle="modal" href="#modal1" role="button">最初のモーダルを開く</a>
【設定】
- 別々のモーダルダイアログ間で
data-bs-target
を設定
ツールチップとポップオーバー(Tooltips and popovers)
ツールチップとポップオーバーを必要に応じてモーダル内に配置。モーダルが閉じられると、内のツールヒントやポップオーバーも自動的に閉じられる。
見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
HTML<div class="modal-body">
<h5>モーダル内のポップオーバー</h5>
<p>この<a href="#" role="button" class="btn btn-secondary popover-test" title="ポップオーバーのタイトル" data-bs-content="ポップオーバーのコンテンツ。もう一度ボタンを押すと非表示になります。">ボタン</a> を押すとポップオーバーが表示されます。</p>
<h5>モーダル内のツールチップ</h5>
<p><a href="#" class="tooltip-test" title="ツールチップ1の表示">このリンク</a>と<a href="#" class="tooltip-test" title="ツールチップ2の表示">このリンク</a>をホバーするとツールチップが表示されます。</p>
</div>
実行コード
Bootstrap5.xの設定例
JSファイルの場合
var popoverTriggerList = [].slice.call(document.querySelectorAll('.popover-test'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
var tooltipTriggerList = [].slice.call(document.querySelectorAll('.tooltip-test'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
※Bootstrap4.xの設定例
JSファイルの場合$(function () {
$('.popover-test').popover()
$('.tooltip-test').tooltip()
})
【設定】
- モーダルの切替ボタンの部分にポップオーバーやツールチップ用のクラスを追加し、別途Javascriptで実行コードを作成する
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-content]
⇒[data-bs-content]
グリッドを使用(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})-*
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
様々なモーダルコンテンツ(Varying modal contents)v5.0.0-alpha1JavaScriptの設定変更
若干異なる内容で同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、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="#exampleModal" data-bs-whatever="@president">社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@vice-president">副社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@officer">重役向けモーダルを開く</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">新メッセージ</h5>
<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.xの設定例
JavaScriptvar exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// モーダルを起動するボタン
var button = event.relatedTarget
// data-bs-* 属性から情報を抽出
var recipient = button.getAttribute('data-bs-whatever')
// 必要に応じて、ここでAJAXリクエストを開始可能
// その後コールバックで更新
//
// モーダルの内容を更新
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = recipient + 'にメッセージを送信'
modalBodyInput.value = recipient
})
※Bootstrap4.xの設定例
JavaScript$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // モーダル切替えボタン
var recipient = button.data('whatever') // data-* 属性から情報を抽出
// 必要に応じて、ここでAJAXリクエストを開始可能(コールバックで更新することも可能)
// モーダルの内容を更新。ここではjQueryを使用するが、代わりにデータ・バインディング・ライブラリか他のメソッドを使用することも可能
var modal = $(this)
modal.find('.modal-title').text(recipient + 'にメッセージを送信')
modal.find('.modal-body input').val(recipient)
})
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
アニメーションの削除(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の便利な記事に記載。
モーダルでアラート表示 ※裏技
見本
※閉じるボタンを押してモーダル(アラート)を閉じて下さい。
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" data-bs-toggle="modal" data-bs-backdrop="false" data-bs-target="#ModalAlert" class="btn btn-primary">ココを押す</button>
<div class="modal fade" id="ModalAlert" 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>
【設定】
- アラートを表示する際に背景がオーバーレイしないように切替ボタンの設定に
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
を追加すれば可能
モーダルでトースト表示 ※裏技
見本
※閉じるボタンを押してトーストを閉じて下さい。
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" data-bs-toggle="modal" data-bs-backdrop="false" data-bs-target="#ModalToast" class="btn btn-primary">ココを押す</button>
<div class="modal fade" id="ModalToast" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content border-0">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="">
<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>
【設定】
- トーストを表示する際に背景がオーバーレイしないように切替ボタンの設定に
data-bs-backdrop="false"
を入れる(そのため閉じるボタンか Esc を押してトーストを閉じる) .modal
>.modal-dialog.modal-sm
>.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
を追加すれば可能だが、右上表示には非対応
モーダルの大きさ(Optional sizes)
モーダルには3つのオプションのサイズがあり、修飾クラスを使用して .modal-dialog
に配置することが可能。これらのサイズは、狭いビューポートでの水平スクロールバーの出現を避けるために、特定のブレークポイントで実行される。
サイズ | クラス |
極小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大 ≥1200px |
---|---|---|---|---|---|---|
小 | .modal-sm |
width: 100% |
max-width: 300px |
|||
標準(中) | なし | max-width: 500px |
||||
大 | .modal-lg |
max-width: 800px |
||||
特大 | .modal-xl |
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}
(上記の「大きさの種類」から選択)を追加
フルスクリーン・モーダル(Fullscreen Modal)v5.0.0-alpha1新設
もう一つのオーバーライドは、.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
を追加(.modal-fullscreen-{breakpoint}-down
は上記「定義済みクラスの種類」から選択)
Sass v5.0.0-beta3追加
変数(Variables)
デフォルトの設定
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: 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; // 下位互換性のためにこれを保持
$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を使用して、非表示のコンテンツを切り替える。また、<body>
に .modal-open
を追加してデフォルトのスクロール動作を再定義し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する .modal-backdrop
を生成する。
データ属性経由で(Via data attributes)
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>
JavaScript経由で(Via JavaScript)v5.0.0-alpha1設定変更
1行のJavaScriptでモーダルを作成:
Bootstrap5.xの設定例
JavaScriptvar myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
※Bootstrap4.xの設定例
JavaScript$('#myModal').modal(options)
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
オプション(Options)
オプションは、データ属性かJavaScriptを使用して渡すことが可能。データ属性の場合、data-bs-backdrop=""
のように data-bs-
にオプション名を追加すること。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
backdrop |
boolean か string 'static' |
true |
モーダルの背景をオーバーレイ表示にするtrue :有効/false :無効または、背景クリック時にモーダルを閉じないようにするには static を指定(静的な背景に記載) |
keyboard |
boolean | true |
Esc が押されたときにモーダルを閉じるtrue :有効/false :無効 |
focus |
boolean | true |
初期化時にモーダルにフォーカスを移動true :有効/false :無効 |
【設定】
.modal
にdata-bs-backdrop="static"
を追加
【変更履歴】
- 【v5.0.0-beta1】
show
オプションを廃止(v5では新しいモーダルインスタンスを作成すると、show
プロパティは機能しなくなるため)
メソッド(Methods)v5.0.0-alpha1設定変更、追加
非同期メソッドと遷移
すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。
詳細については、Javascriptのドキュメントに記載。
引渡オプション
コンテンツをモーダルとしてアクティブ化する。オプションのオプション object
を受け入れる。
Bootstrap5.xの設定例
JavaScriptvar myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
※Bootstrap4.xの設定例
JavaScript$('#myModal').modal({
keyboard: false
})
toggle
モーダルを手動で切り替える。モーダルが実際に表示か非表示になる前(つまり、shown.bs.modal
か hidden.bs.modal
イベント発動前)に呼び出し元に戻る。
JavaScriptmyModal.toggle()
show
モーダルを手動で開く。モーダルが実際に表示される前(つまり、shown.bs.modal
イベント発動前)に呼び出し元に戻る。
JavaScriptmyModal.show()
また、モーダルイベントで受け取ることができる引数として(relatedTarget
プロパティとして)DOM要素を渡すことが可能。v5.0.0-beta3追加
JavaScriptvar modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
hide
モーダルを手動で非表示にする。モーダルが実際に非表示になる前(つまり、hidden.bs.modal
イベントが発動する前)に呼び出し元に戻る。
JavaScriptmyModal.hide()
handleUpdate
モーダルの高さが開いているとき(つまり、スクロールバーが表示されているとき)に変更された場合は、モーダルの位置を手動で再調整する。
JavaScriptmyModal.handleUpdate()
dispose
要素のモーダルを破棄(DOM要素に保存されているデータを削除)。
JavaScriptmyModal.dispose()
getInstance v5.0.0-alpha1追加
DOM要素に関連付けられたモーダル・インスタンスを取得することを可能にする静的メソッド
JavaScriptvar myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Bootstrapモーダル・インスタンスを返す
【変更履歴】
- 【v5.0.0-alpha1】
$().modal('xxx')
⇒modal.xxx()
getInstance
メソッドが追加
イベント(Events)
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-bs-keyboard を false に設定して Esc を押すと発動。 |
使用例 v5.0.0-alpha1設定変更
JavaScriptvar myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// 何かをする...
})