Bootstrap5 モーダル
モーダル（Modal）は親ウィンドウの上に重なる子ウィンドウです。通常、親ウィンドウから離れることなく、単一のソースからのコンテンツを表示し、何らかの操作を行えるようにすることが目的です。子ウィンドウは情報のやり取りなどを提供できます。
モーダルの作成方法
次の例は、シンプルなモーダル効果を作成します：
例
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">モーダルを開く</button>
<!--モーダル-->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--モーダルヘッダー-->
<div class="modal-header">
<h4 class="modal-title">モーダルのタイトル</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!--モーダルの内容-->
<div class="modal-body">モーダルの内容..</div>
<!--モーダルフッター-->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
試してみる »
アニメーションを追加
.fade クラスを使用すると、モーダルの表示・非表示の効果を設定できます:
例
<!--アニメーション効果を追加-->
<div class="modal fade"></div>
<!--アニメーション効果を使用しない-->
<div class="modal"></div>
試してみる »
モーダルのサイズ
追加することで.modal-smクラスを使用して小さなモーダルを作成できます。.modal-lgクラスで大きなモーダルを作成できます。
サイズクラスは<div>要素の.modal-dialogクラスの後に配置します :
全画面表示
使用.modal-fullscreenクラスでモーダルを全画面表示できます:
使用.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 以下のサイズで全画面表示 | 試してみる |
モーダルを中央に表示
使用.modal-dialog-centeredクラスでモーダルを水平・垂直方向の両方で中央に表示できます:
モーダルのスクロールバー
デフォルトでは、モーダルに多くのコンテンツが含まれる場合、ページに自動的にスクロールが生成され、モーダルはページのスクロールに合わせてスクロールします:
モーダル内にだけスクロールバーを設定したい場合は、次を使用できます.modal-dialog-scrollableクラス：
その他の拡張