Bootstrap5 モーダル
この記事では、Bootstrap5 フレームワークのモーダルコンポーネントについて解説します。モーダルは、現在のページ上にダイアログボックスをポップアップ表示し、ユーザーに操作を促したり、重要な情報を表示したりするために使用されます。この記事では、モーダルのHTML構造、CSSスタイル、JavaScriptの動作、およびさまざまな設定オプションについて詳しく説明します。
1. モーダルとは?
モーダルは、ユーザーの注意を引き付け、特定のタスクを実行するように促すために使用されるダイアログボックスまたはポップアップウィンドウです。モーダルは、背景を暗くすることで、ユーザーがモーダルとの対話を完了するまで、ページの残りの部分を操作できないようにします。
モーダルの用途:
-
フォームの送信
-
確認ダイアログの表示
-
追加情報の提供
-
エラーメッセージの表示
2. Bootstrap 5 モーダルの基本構造
Bootstrap 5 のモーダルは、いくつかの主要な HTML 要素で構成されています。
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">モーダルのタイトル</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>
HTML 要素の説明:
要素 | 説明 |
.modal | モーダルコンテナ。 |
.modal-dialog | モーダルダイアログのサイズと位置を制御するコンテナ。 |
.modal-content | モーダルのコンテンツを含むコンテナ。 |
.modal-header | モーダルのヘッダー。通常、タイトルと閉じるボタンが含まれます。 |
.modal-body | モーダルのメインコンテンツ。 |
.modal-footer | モーダルのフッター。通常、アクションボタンが含まれます。 |
data-bs-dismiss="modal" | モーダルを閉じるボタンに適用する属性 |
3. Bootstrap 5 モーダルの使用方法
Bootstrap 5 モーダルを使用するには、次の手順に従います。
3.1 Bootstrap 5 ファイルのインポート
HTML ファイルに Bootstrap 5 の CSS と JavaScript ファイルをインポートします。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
3.2 モーダル HTML の作成
モーダルを表示するボタンまたはリンクを作成し、data-bs-toggle="modal" および data-bs-target="#myModal" 属性を追加します。 #myModal は、モーダルコンテナの id に置き換えてください。
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
モーダルを表示
</button>
3.3 JavaScript を使用したモーダルの制御 (任意)
JavaScript を使用して、モーダルの表示、非表示、およびその他の動作を制御できます。
// モーダルを取得
var myModal = document.getElementById('myModal');
var modal = new bootstrap.Modal(myModal);
// モーダルを表示
modal.show();
// モーダルを非表示
modal.hide();
4. モーダルオプション
Bootstrap 5 のモーダルには、動作をカスタマイズするためのさまざまなオプションがあります。
4.1 data-* 属性
data-bs-* 属性を使用して、モーダルの動作を設定できます。
属性 | 説明 |
data-bs-backdrop | モーダルの背後をクリックしたときの動作を設定します。 |
data-bs-keyboard | Esc キーを押したときの動作を設定します。 |
4.2 JavaScript オプション
JavaScript を使用して、モーダルの動作を設定することもできます。
var modal = new bootstrap.Modal(myModal, {
backdrop: 'static', // モーダルの背後をクリックしても閉じない
keyboard: false // Esc キーを押しても閉じない
});
5. モーダルイベント
Bootstrap 5 のモーダルは、さまざまなイベントをトリガーします。
イベント | 説明 |
show.bs.modal | モーダルが表示される直前にトリガーされます。 |
shown.bs.modal | モーダルが表示された後にトリガーされます。 |
hide.bs.modal | モーダルが非表示になる直前にトリガーされます。 |
hidden.bs.modal | モーダルが非表示になった後にトリガーされます。 |
6. モーダルサイズ
Bootstrap 5 は、さまざまなサイズのモーダルを提供します。
クラス | サイズ |
modal-sm | 小 |
modal-lg | 大 |
modal-xl | 特大 |
例:
<div class="modal-dialog modal-lg">
</div>
7. 垂直方向に中央揃えされたモーダル
モーダルを垂直方向に中央揃えするには、 modal-dialog-centered クラスを .modal-dialog に追加します。
<div class="modal-dialog modal-dialog-centered">
</div>
8. モーダルのネスト
モーダルをネストする場合は、data-bs-backdrop="static" および data-bs-keyboard="false" 属性を使用して、親モーダルが閉じないようにします。
9. モーダルのアニメーション
デフォルトでは、Bootstrap 5 のモーダルはフェードインアニメーションを使用します。アニメーションを無効にするには、fade クラスをモーダルコンテナから削除します。
10. モーダルの例
10.1 警告モーダル
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#warningModal">
警告を表示
</button>
<div class="modal fade" id="warningModal" tabindex="-1" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="warningModalLabel">警告</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-danger">実行</button>
</div>
</div>
</div>
</div>
11. まとめ
この記事では、Bootstrap 5 のモーダルコンポーネントについて解説しました。モーダルは、ユーザーの注意を引き付け、特定のタスクを実行するように促すために使用される強力なツールです。さまざまなオプションとイベントを使用して、モーダルの動作をカスタマイズできます。
関連リソース
-
Bootstrap 5 モーダルドキュメント: https://getbootstrap.com/docs/5.0/components/modal/
よくある質問
Q1: モーダルを垂直方向に中央揃えするにはどうすればよいですか?
A1: .modal-dialog-centered クラスを .modal-dialog に追加します。
Q2: モーダルを閉じるボタンを無効にするにはどうすればよいですか?
A2: data-bs-dismiss="modal" 属性をボタンから削除します。
Q3: モーダルが開いたときに JavaScript 関数を実行するにはどうすればよいですか?
A3: shown.bs.modal イベントリスナーを使用します。
$('#myModal').on('shown.bs.modal', function () {
// モーダルが開いたときに実行するコード
});