Bootstrap5 モーダル

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 要素の説明:

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-* 属性を使用して、モーダルの動作を設定できます。

4.2 JavaScript オプション

JavaScript を使用して、モーダルの動作を設定することもできます。

var modal = new bootstrap.Modal(myModal, {
  backdrop: 'static', // モーダルの背後をクリックしても閉じない
  keyboard: false      // Esc キーを押しても閉じない
});

5. モーダルイベント

Bootstrap 5 のモーダルは、さまざまなイベントをトリガーします。

6. モーダルサイズ

Bootstrap 5 は、さまざまなサイズのモーダルを提供します。

例:

<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 () {
  // モーダルが開いたときに実行するコード
});