Bootstrap モーダル

Bootstrap モーダルは、ダイアログボックスを簡単に作成できる効率的な方法です。現在のページから移動することなく、ユーザーに情報を伝えたり、ユーザーから情報を取得したりするために使用できます。この記事では、Bootstrap モーダルの使用方法について、作成、表示、非表示、設定、カスタマイズなどを含めて詳しく説明します。

基本的な例

最小限のコードで基本的な Bootstrap モーダルを作成する方法は次のとおりです。

<!-- モーダルを起動するボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを表示する
</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="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></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>

• data-bs-toggle="modal" 属性は、要素がクリックされたときにモーダルを表示するように Bootstrap に指示します。

• data-bs-target="#exampleModal" 属性は、表示するモーダルの ID を指定します。

モーダルの HTML 構造は、主に3つの部分で構成されています。

• .modal: モーダル全体を表すコンテナ。

• .modal-dialog: モーダルのサイズと位置を制御するために使用されます。

• .modal-content: モーダルの実際のコンテンツが含まれています。

モーダルコンテンツ

モーダルの内容は必要に応じてカスタマイズできますが、通常は次のものが含まれます。

• .modal-header: モーダルのタイトルと閉じるボタンが含まれています。

  • <h1> から <h6> タグを使用してタイトルを定義できます。

  • 閉じるボタンは <button> 要素を使用し、class="btn-close" と data-bs-dismiss="modal" 属性を追加します。

• .modal-body: モーダルの主要コンテンツを表示するために使用され、テキスト、画像、フォームなどを含めることができます。

• .modal-footer: 通常、"確認" や "キャンセル" などの操作ボタンが配置されます。

  • 任意の種類のボタンを使用し、対応するイベントハンドラを追加できます。

サイズ

定義済みの CSS クラスを使用して、モーダルのサイズを制御できます。

• .modal-sm: 小さなモーダル。

• .modal-lg: 大きなモーダル。

• .modal-xl: 超大型モーダル。

これらのクラスを .modal-dialog 要素に追加するだけです。

垂直方向の中央揃え

デフォルトでは、Bootstrap モーダルは自動的に垂直方向に中央揃えされます。垂直方向の位置をカスタマイズする必要がある場合は、以下の方法を使用できます。

• CSS クラス .modal-dialog-centered を使用する: このクラスを .modal-dialog 要素に追加すると、モーダルはビューポートに対して垂直方向に中央揃えされます。

• JavaScript コードで動的に設定する: Modal.handleUpdate() メソッドを使用して、モーダルの位置を更新できます。

スクロール可能なコンテンツ

モーダルのコンテンツが長すぎる場合は、以下の方法でスクロールバーを有効にできます。

• .modal-dialog に overflow-y: auto; を設定します。

• .modal-body に max-height と overflow-y: auto; を設定します。

JavaScript を使用する

JavaScript コードを使用してモーダルを制御できます。

• Modal.getInstance(element) を使用してモーダルインスタンスを取得します。element はモーダルの HTML 要素です。

• 以下のメソッドを使用してモーダルを制御します。

  • show(): モーダルを表示します。

  • hide(): モーダルを非表示にします。

  • toggle(): モーダルの表示状態を切り替えます。

イベント

Bootstrap モーダルは、以下のイベントをサポートしています。

これらのイベントを使用して、カスタム操作を実行できます。たとえば、モーダルが表示される前にデータを読み込んだり、モーダルが非表示になった後にフォームデータをクリアしたりできます。

設定

JavaScript コードを使用して、モーダルのデフォルトの動作を設定できます。

メソッド

静的メソッド

アクセシビリティ

アクセスしやすいモーダルを作成するには、以下の推奨事項に従ってください。

• スクリーンリーダーの読みやすさを向上させるために、ARIA 属性を使用します。

  • たとえば、モーダルを起動するボタンに aria-haspopup="true" と aria-expanded="false" 属性を追加し、モーダルが開いたら aria-expanded 属性を true に更新します。

• モーダルのコンテンツが理解しやすく操作しやすいことを確認します。

  • 明確なタイトルとラベルを使用し、十分なコントラストを提供します。

カスタマイズ

CSS を使用して、モーダルの外観をカスタマイズできます。

• 背景色、境界線、影などのスタイルを変更します。

  • たとえば、.modal-content クラスのスタイルを変更して、モーダルのコンテンツ領域のスタイルをカスタマイズできます。

JavaScript を使用して、より高度なカスタム機能を実装できます。

• たとえば、コンテンツを動的に追加または削除したり、カスタムアニメーション効果を作成したりできます。

よくある質問

Q: ユーザーが背景の遮蔽レイヤーをクリックしたときにモーダルが閉じないようにするにはどうすればよいですか？

A: モーダルを起動するボタンまたはモーダル要素に data-bs-backdrop="static" 属性を追加します。

Q: モーダルの閉じるボタンを無効にするにはどうすればよいですか？

A: 閉じるボタンから data-bs-dismiss="modal" 属性を削除します。

Q: モーダルの表示または非表示時にカスタム JavaScript コードを実行するにはどうすればよいですか？

A: show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal イベントを使用します。