Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
モーダル（Modal） v4.5.1設定変更 v4.4.0追加
BootstrapのJavaScriptモーダルプラグインを使用して、ライトボックス、ユーザー通知、または完全カスタムコンテンツ用のダイアログをサイトに追加。
使い方（How it works）
Bootstrapモーダルコンポーネントを使い始める前に、メニューオプションが最近変更されたので、次を読むこと。
- モーダルは、HTML、CSS、およびJavaScriptで構築。ドキュメント内の他の部分に配置され、
<body>からスクロールを削除して、代わりにモーダルコンテンツをスクロールする。 - モーダルの"backdrop"（背景部分）をクリックすると、自動的にモーダルが閉じる。
- Bootstrapは一度に1つのモーダルウィンドウしかサポートしない。入れ子になったモーダルは、ユーザー経験が乏しいと思われるためサポートされていない。
- モーダルは、
position：fixedを使用。これは、そのレンダリングに関してちょっと変わったことがある。可能であれば、他の要素からの干渉を避けるために、モーダルHTMLを最上位に配置すること。他の固定要素内で.modalを入れ子になったときに問題に遭遇する可能性がある。 - 再度、
position：fixedのために、モバイルデバイス上のモーダル使用に関するいくつかの注意点がある。詳細については、ブラウザ・サポートの解説を参照すること。 - HTML5がそのセマンティクスをどのように定義するかによって、
autofocusHTML属性は、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">×</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">×</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.0.0】
- モーダルのヘッダ：《閉じるアイコンボタン》⇒《タイトル》の順から《タイトル》⇒《閉じるアイコンボタン》の順に
- モーダルのタイトルの大きさ：
<h4>⇒<h5>
- 【v4.5.0】
div.modal-dialogからrole="document"属性（ドキュメントの役割を伝える）の追加は不要に（モーダルを表示する際にスクリプトでdiv.modalにaria-modal="true"が自動的に挿入されるため）
- 【v4.5.1】
div.modalにrole="dialog"属性（モーダルダイアログの役割を伝える）の追加は不要（モーダルを表示する際にスクリプトでdiv.modalにrole="dialog"が自動的に挿入されるため）
モーダルの設定（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">×</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">×</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"を入れる必要がある
- Esc を押しても閉じられないためには
長いコンテンツのスクロール（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">×</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）
様々なモーダルコンテンツ（Varying modal content）
若干異なる内容で同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、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">×</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)
})
アニメーションの変更（Change animation）v4.2.0追加
scss/_variables.scss 内の $modal-fade-transform 変数は、モーダルのフェードインアニメーションの前の .modal-dialog のトランスフォーム状態を決定し、$modal-show-transform 変数は、モーダルのフェードインアニメーションの終了時に .modal-dialog のトランスフォーム状態を決定。
例えばズームインアニメーションをしたい場合は、$modal-fade-transform: scale(.8) を設定。
アニメーションの削除（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.0.0】
remoteは、既にv3.3.0で廃止され、v4では削除
- 【v4.4.0】
backdropでstaticを設定した場合、モーダルの外側だけでなく Esc を押してもモーダルが閉じられなくなった
- 【v4.5.0】
backdropでstaticを設定した場合、Esc を押したらモーダルが閉じられるように再変更
メソッド（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 (event) {
// 何かをする...
})
【変更履歴】
- 【v4.0.0】
loaded.bs.modalはremoteの廃止（v3.3.0）に伴い廃止