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

モーダル（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）

以下は静的モーダルの例（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"] > &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"]（プラグインを有効にする）と、[data-bs-target="#モーダルのID"]（または [href="#モーダルのID"]）
    • div.modal（ボタンのリンク先）には、id="ID名"とtabindex="-1"（Esc を押すとモーダルが閉じるようにする）
    をそれぞれ入れること
【アクセシビリティの設定】
  • h5.modal-title に id="ID名" を入れ、div.modal に aria-labelledby="タイトルのID"属性（タイトルをモーダルのラベルとして関連付ける）を入れること
  • さらに div.modal に aria-describedby属性を入れてモーダルダイアログの説明をすることも可能
【変更履歴】
  • 【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 を追加

ツールチップとポップオーバー（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 に必ず追加すること。さらに、モーダルダイアログの説明を .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 は上記「定義済みクラスの種類」から選択）

 

使用方法（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設定変更、追加

引渡オプション

コンテンツをモーダルとしてアクティブ化する。オプションのオプション 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()

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