モーダル～Bootstrap4移行ガイド

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

使い方（How it works）

Bootstrapモーダルコンポーネントを使い始める前に、メニューオプションが最近変更されたので、次を読むこと。

モーダルは、HTML、CSS、およびJavaScriptで構築。ドキュメント内の他の部分に配置され、<body> からスクロールを削除して、代わりにモーダルコンテンツをスクロールする。
モーダルの"backdrop"（背景部分）をクリックすると、自動的にモーダルが閉じる。
Bootstrapは一度に1つのモーダルウィンドウしかサポートしない。入れ子になったモーダルは、ユーザー経験が乏しいと思われるためサポートされていない。
モーダルは、position：fixed を使用。これは、そのレンダリングに関してちょっと変わったことがある。可能であれば、他の要素からの干渉を避けるために、モーダルHTMLを最上位に配置すること。他の固定要素内で .modal を入れ子になったときに問題に遭遇する可能性がある。
再度、position：fixed のために、モバイルデバイス上のモーダル使用に関するいくつかの注意点がある。詳細については、ブラウザ・サポートの解説を参照すること。
HTML5がそのセマンティクスをどのように定義するかによって、autofocus HTML属性は、Bootstrapのモーダルには何の影響も与えない。同じ効果を得るためにカスタムJavaScriptを使用：

JavaScript$('#myModal').on('shown.bs.modal', function () {
	$('#myInput').trigger('focus')
})

このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするを参照。

実例の見本と使用方法のガイドラインを参照。

実例（Examples）

モーダルコンテンツ（Modal components）v4.5.1設定変更

次は静的モーダルの実例（position と display が再定義されたことを意味する）。モーダルヘッダ、モーダルボディ（padding に必要）、モーダルフッタ（オプション）が含まれます。可能な限り、アクションを終了するモーダルヘッダを含めるか、別の明示的な却下アクションを提供することを推奨。

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

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

<div class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">モーダルのタイトル</h4>
			</div><!-- /.modal-header -->
			<div class="modal-body">
				<p>モーダルボディの本文。</p>
			</div><!-- /.modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-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.close > <span> > ×]《閉じるアイコンボタン》}《ヘッダ》 + div.modal-body《コンテンツ》 + div.modal-footer《フッタ》
ヘッダ（.modal-header）は、《タイトル》（.modal-title）⇒《閉じるアイコンボタン》（button.close）の順に記載
アイコンとなる × は、× と記述してエスケープ処理をする
プラグインを使ってモーダルを閉じるため、閉じるアイコンボタンや閉じるボタン部分には data-dismiss="modal" を入れる

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

モーダルを閉じるボタンとなる <button> に、aria-label 属性（アイコンボタンのラベル）を入れる
閉じるアイコンボタンの × を span[aria-hidden="true"]（スクリーンリーダー等での読み上げをスキップさせる）で囲む

【変更履歴】

【v4.5.0】
- div.modal-dialog から role="document" 属性（ドキュメントの役割を伝える）の追加は不要に（モーダルを表示する際にスクリプトで div.modal に aria-modal="true" が自動的に挿入されるため）
【v4.5.1】
- div.modal に role="dialog" 属性（モーダルダイアログの役割を伝える）の追加は不要（モーダルを表示する際にスクリプトで div.modal に role="dialog" が自動的に挿入されるため）

【Bootstrap3.xとの変更箇所】

モーダルのヘッダ：《閉じるアイコンボタン》⇒《タイトル》の順から《タイトル》⇒《閉じるアイコンボタン》の順に
モーダルのタイトルの大きさ：<h4> ⇒ <h5>

モーダルの設定（Live demo）

下のボタンをクリックして、動作中のモーダルのデモを切り替える。ページの上からスライドしてフェードイン。

見本

設定例

<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-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="close" data-dismiss="modal" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>モーダルのコンテンツ文。</p>
			</div>
			<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 -->

【設定】

button.btn《切り替えボタン》 + 〔div.modal.fade[role="dialog"] > div.modal-dialog[role="document"] > div.modal-content > {div.modal-header > h5.modal-title《タイトル》 + [button.close[data-dismiss="modal"][aria-label="閉じる"] > span[aria-hidden="true"] > ×]《閉じるアイコンボタン》}《ヘッダ》 + div.modal-body《コンテンツ》 + div.modal-footer《フッタ》〕《モーダル部分》
モーダルのプラグインを使用するため、
- 切り替えボタンには、data-toggle="modal"（プラグインを有効にする）と、data-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属性を入れてモーダルダイアログの説明をすることも可能

静的な背景（Static backdrop）v4.4.0動作変更、v4.5.0設定変更

背景を静的に設定した場合は、モーダルの外側をクリックしてもモーダルは閉じられない。

見本

設定例

<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
	ココを押すと表示
</button>

<!-- モーダルの設定 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">了解</button>
			</div>
		</div>
	</div>
</div>

【設定】

.modal に data-backdrop="static",data-keyboard="false" を追加

【変更履歴】

【v4.4.0】
- モーダルの外側だけでなく Esc を押しても閉じられなくなった
- 閉じない場合のアニメーションが追加
【v4.5.0】
- Esc を押しても閉じられないためには data-keyboard="false" を入れる必要がある

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

モーダルがユーザーのビューポートやデバイスにとって長すぎると、モーダルはページ自体とは独立してスクロール。次の見本で試して、どういう意味か確認すること。

見本

木曾路はすべて山の中である。

あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。

一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。

名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。

長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。そのかわり、大雨ごとにやって来る河水の氾濫が旅行を困難にする。そのたびに旅人は最寄り最寄りの宿場に逗留して、道路の開通を待つこともめずらしくない。この街道の変遷は幾世紀にわたる封建時代の発達をも、その制度組織の用心深さをも語っていた。鉄砲を改め女を改めるほど旅行者の取り締まりを厳重にした時代に、これほどよい要害の地勢もないからである。この谿谷の最も深いところには木曾福島の関所も隠れていた。木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。

一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時...

設定例

<!-- モーダルの設定 -->
<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="close" data-dismiss="modal" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">変更を保存</button>
			</div>
		</div>
	</div>
</div>

.modal-dialog-scrollable を .modal-dialog に追加することでモーダル本体をスクロール可能にする。v4.3.0追加

見本

木曾路はすべて山の中である。

あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。

設定例

<!-- スクロール可能なモーダル -->
<div class="modal-dialog modal-dialog-scrollable">
	...
</div>

垂直方向に中央に配置（Vertically centered）v4.0.0新設

.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）

ツールチップとポップオーバーを必要に応じてモーダル内に配置。モーダルが閉じられると、内のツールヒントやポップオーバーも自動的に閉じられる。

見本

設定例

HTML<div class="modal-body">
	<h5>モーダル内のポップオーバー</h5>
	<p>この<a href="#" role="button" class="btn btn-secondary popover-test" title="ポップオーバーのタイトル" data-content="ポップオーバーのコンテンツ。もう一度ボタンを押すと非表示になります。">ボタン</a> を押すとポップオーバーが表示されます。</p>
	<h5>モーダル内のツールチップ</h5>
	<p><a href="#" class="tooltip-test" title="ツールチップ1の表示">このリンク</a>と<a href="#" class="tooltip-test" title="ツールチップ2の表示">このリンク</a>をホバーするとツールチップが表示されます。</p>
</div>

実行コード

JSファイルの場合$(function () {
	$('.popover-test').popover()
	$('.tooltip-test').tooltip()
})

【設定】

モーダルの切替ボタンの部分にポップオーバーまたはツールチップ用のクラスを追加し、別途Javascriptで実行コードを作成する

グリッドを使用（Using the grid ）

.modal-body 内に .container-fluid を入れ子にして、モーダル内のBootstrapグリッドシステムを利用。次に、通常どおりのグリッドシステムクラスを使用。

見本

設定例

<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 ml-auto">.col-md-4 .ml-auto</div>
		</div>
		<div class="row">
			<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
			<div class="col-md-2 ml-auto">.col-md-2 .ml-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{l|r|x}(-{breakpoint})-auto）

若干異なる内容で同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、event.relatedTarget 属性とHTML data-*属性（おそらくjQuery経由）を使用。

次に見本とHTMLとJavaScriptの設定例を示す。 relatedTarget の詳細は、モーダルイベントの解説に記載。

見本

設定例

HTML<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@president">社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@vice-president">副社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="recipient-name">受信者：</label>
						<input type="text" class="form-control" id="recipient-name">
					</div>
					<div class="form-group">
						<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-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">送信</button>
			</div>
		</div>
	</div>
</div>

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)
})

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

フェードインではなく、いきなり表示されるモーダルにする場合は、モーダルのマークアップから .fade クラスを削除。

見本

設定例

<div class="modal" id="myModal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
	...
</div>

【設定】

.modal で .fade をはずす

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

モーダルの高さが開いている間に変更され、スクロールバーが表示された場合には、$('#myModal').modal('handleUpdate') を呼び出してモーダルの位置を再調整する必要がある。

アクセシビリティ（Accessibility）v4.5.1設定変更

モーダルタイトルを参照する aria-labelledby="..." を .modal に必ず追加すること。さらに、モーダルダイアログの説明を .modal の aria-describedby で提供することも可能。JavaScript経由で追加するので、role="dialog" をHTMLに追加する必要はない。

【変更履歴】

【v4.5.0】
- div.modal-dialog から role="document" 属性（ドキュメントの役割を伝える）の追加は不要に（モーダルを表示する際にスクリプトで div.modal に aria-modal="true" が自動的に挿入されるため）
【v4.5.1】
- div.modal に role="dialog" 属性（モーダルダイアログの役割を伝える）の追加は不要（モーダルを表示する際にスクリプトで div.modal に role="dialog" が自動的に挿入されるため）

YouTube動画の埋め込み（Embedding YouTube videos）サンプル

YouTubeの動画をモーダルに埋め込むには、再生を自動的に停止するなどの追加のJavaScriptが必要。詳細は、このStack Overflowの便利な記事に記載。

モーダルの大きさ（Optional sizes）v4.2.1一部追加

モーダルには3つのオプションのサイズがあり、修飾クラスを使用して .modal-dialog に配置することが可能。これらのサイズは、狭いビューポートでの水平スクロールバーの出現を避けるために、特定のブレークポイントで実行される。

サイズ	クラス	モーダルの最大幅
小	`.modal-sm`	`300px`
標準（中）	なし	`500px`
大	`.modal-lg`	`800px`
特大	`.modal-xl`	`1140px`

修飾クラスを持たないデフォルトモーダルは、「中」サイズのモーダルを構成。

大きさの種類

●特大：.modal-xl v4.2.1追加

●大きめ：.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}（上記の「大きさの種類」から選択）を追加

【変更履歴】

【v4.2.1】
- 大きさの種類に特大（.modal-xl）が追加

使用方法（Usage）

モーダルプラグインは、必要に応じて、データ属性やJavaScriptを使用して、非表示のコンテンツを切り替える。また、<body> に .modal-open を追加してデフォルトのスクロール動作を再定義し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する .modal-backdrop を生成する。

データ属性経由で（Via data attributes）

JavaScriptを書かずにモーダルを有効にする。特定のモーダルを起動させるためには、data-target="#foo" または href="#foo" とともに、ボタンのようなコントローラー要素に data-toggle="modal" を設定すること。

ボタンで設定<button type="button" data-toggle="modal" data-target="#myModal">モーダルを起動</button>

リンクで設定<a data-toggle="modal" href="#myModal">モーダルを起動</a>

JavaScript経由で（Via JavaScript）

JavaScript1行でID myModal のモーダルを呼び出す：

JavaScript$('#myModal').modal(options)

オプション（Options）サンプル v4.0.0一部変更

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-backdrop="" のように data- にオプション名を追加すること。

名前	タイプ	デフォルト	説明
backdrop v4.5.0動作変更	boolean または string `'static'`	true	モーダルの背景をオーバーレイ表示にする `true`：有効／`false`：無効または、背景クリック時にモーダルを閉じないようにするには `static` を指定（静的な背景を参照）
keyboard	boolean	true	`Esc` が押されたときにモーダルを閉じる `true`：有効／`false`：無効
focus v4.0.0追加	boolean	true	初期化時にモーダルにフォーカスを移動 `true`：有効／`false`：無効
show	boolean	true	初期化時にモーダルを表示 `true`：有効／`false`：無効

【変更履歴】

【v4.4.0】
- backdrop で static を設定した場合、モーダルの外側だけでなく Esc を押してもモーダルが閉じられなくなった
【v4.5.0】
- backdrop で static を設定した場合、Esc を押したらモーダルが閉じられるように再変更

【Bootstrap3.xとの変更箇所】

remote は、既にv3.3.0で廃止され、v4では削除

メソッド（Methods）

非同期メソッドと遷移

すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。

詳細については、Javascriptのドキュメントに記載。

`.modal(options)`

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

JavaScript$('#myModal').modal({
	keyboard: false
})

`.modal('toggle')`

モーダルを手動で切り替える。モーダルが実際に表示または非表示になる前（つまり、shown.bs.modal または hidden.bs.modal イベント発動前）に呼び出し元に戻る。

JavaScript$('#myModal').modal('toggle')

`.modal('show')`

モーダルを手動で開く。モーダルが実際に表示される前（つまり、shown.bs.modal イベント発動前）に呼び出し元に戻る。

JavaScript$('#myModal').modal('show')

`.modal('hide')`

モーダルを手動で非表示にする。モーダルが実際に非表示になる前（つまり、hidden.bs.modal イベントが発動する前）に呼び出し元に戻る。

JavaScript$('#myModal').modal('hide')

`.modal('handleUpdate')`

モーダルの高さが開いているとき（つまり、スクロールバーが表示されているとき）に変更された場合は、モーダルの位置を手動で再調整する。

JavaScript$('#myModal').modal('handleUpdate')

`.modal('dispose')` v4.0.0追加

要素のモーダルを破棄。

イベント（Events）サンプル v4.0.0一部廃止、v4.4.0一部追加

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 v4.4.0追加	モーダルのbackdropオプションが `static` のときに、モーダルの外側の背景をクリックするか、キーボードオプションまたは `data-keyboard` を `false` に設定して `Esc` を押すと発動。

使用例

JavaScript$('#myModal').on('hidden.bs.modal', function (e) {
	// 何かをする...
})

【Bootstrap3.xとの変更箇所】

loaded.bs.modal は remote の廃止（v3.3.0）に伴い廃止

モーダル（Modal） v4.5.1設定変更 v4.4.0追加

使い方（How it works）

実例（Examples）

モーダルコンテンツ（Modal components）v4.5.1設定変更

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

モーダルのタイトル

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

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

モーダルの設定（Live demo）

見本

モーダルのタイトル

設定例

静的な背景（Static backdrop）v4.4.0動作変更、v4.5.0設定変更

見本

設定例

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

見本

設定例

見本

設定例

垂直方向に中央に配置（Vertically centered）v4.0.0新設

見本

設定例

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

見本

設定例

実行コード

グリッドを使用（Using the grid ）

見本

設定例

様々なモーダルコンテンツ（Varying modal contents）

見本

設定例

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

見本

設定例

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

アクセシビリティ（Accessibility）v4.5.1設定変更

YouTube動画の埋め込み（Embedding YouTube videos）サンプル

モーダルの大きさ（Optional sizes）v4.2.1一部追加

大きさの種類

設定例

使用方法（Usage）

データ属性経由で（Via data attributes）

JavaScript経由で（Via JavaScript）

オプション（Options）サンプル v4.0.0一部変更

メソッド（Methods）

非同期メソッドと遷移

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

.modal('dispose') v4.0.0追加

イベント（Events）サンプル v4.0.0一部廃止、v4.4.0一部追加

使用例

ページ移動

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

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

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

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`.modal('dispose')` v4.0.0追加