モーダル～Bootstrap5設置ガイド

使い方（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）

以下は静的モーダルの例（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"]

モーダルの設定（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})-*

若干異なる内容で同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、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	大 ≥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 を追加（.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()

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) {
	// 何かをする...
})

前のページ
リストグループ次のページ
ナビ&タブ

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

使い方（How it works）

Bootstrap5.xの設定例

※Bootstrap4.xの設定例

実例（Examples）

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

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

モーダルのタイトル

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

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

【設定】

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

【注意】

【変更履歴】

モーダルの設定（Live demo）

見本

モーダルのタイトル

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

【設定】

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

【変更履歴】

静的な背景（Static backdrop）

見本

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

【設定】

【変更履歴】

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

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

見本

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

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

見本

設定例

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

見本

設定例

【設定】

モーダルの切替（Toggle between modals）v5.0.0-beta3新設

見本

設定例

【設定】

ツールチップとポップオーバー（Tooltips and popovers）

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

実行コード

Bootstrap5.xの設定例

※Bootstrap4.xの設定例

【設定】

【変更履歴】

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

見本

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

【設定】

【変更履歴】

様々なモーダルコンテンツ（Varying modal contents）v5.0.0-alpha1JavaScriptの設定変更

見本

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

Bootstrap5.xの設定例

※Bootstrap4.xの設定例

【変更履歴】

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

見本

設定例

【設定】

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

アクセシビリティ（Accessibility）

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

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

見本

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

【設定】

【注意】

モーダルでトースト表示 ※裏技

見本

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

【設定】

【注意】

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

大きさの種類

設定例

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

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

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

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

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

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

Bootstrap5.xの設定例緑背景がv5.0.0-beta1での変更箇所

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

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

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

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