メインコンテンツへスキップ

モーダル(Modal) v5.0.0-beta1設定変更

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

目次

使い方(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')
})

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

 

実例(Examples)

以下は静的モーダルの例(positiondisplay が再定義されたことを意味する)。モーダルヘッダ、モーダルボディ(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 属性(アイコンボタンのラベル)を入れる
【注意】
  • .modalrole="dialog" 属性【v4.5.1で変更】や .modal-dialogrole="document" 属性【v4.5.0で変更】の追加は不要(モーダルを表示する際にスクリプトで .modalrole="dialog"aria-modal="true" が自動的に挿入されるため)
【変更履歴】
  • 【v5.0.0-alpha2】
    • 閉じるボタンの設定の変更(.close.btn-closespan[aria-hidden="true"] > &times; が不要に)
  • 【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-titleid="ID名" を入れ、div.modalaria-labelledby="タイトルのID" 属性(タイトルをモーダルのラベルとして関連付ける)を入れること
  • さらに div.modalaria-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})-*

様々なモーダルコンテンツ(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 に必ず追加すること。さらに、モーダルダイアログの説明を .modalaria-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:無効
【設定】
  • .modaldata-bs-backdrop="static" を追加
【変更履歴】
  • 【v5.0.0-beta1】
    • show オプションを廃止(v5では新しいモーダルインスタンスを作成すると、show プロパティは機能しなくなるため)

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

引渡オプション

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

Bootstrap5.xの設定例
JavaScriptvar myModal = new bootstrap.Modal(document.getElementById('myModal'), {
	keyboard: false
})
※Bootstrap4.xの設定例
JavaScript$('#myModal').modal({
  keyboard: false
})

toggle

モーダルを手動で切り替える。モーダルが実際に表示か非表示になる前(つまり、shown.bs.modalhidden.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-keyboardfalse に設定して Esc を押すと発動。
使用例 v5.0.0-alpha1設定変更
JavaScriptvar myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
	// 何かをする...
})