Bootstrap 4 モーダル

このチュートリアルでは、WebページにBootstrap 4モーダル（ポップアップ）を作成する方法について説明します。

一、Bootstrap モーダル

1. モーダルの概要

モーダルは、情報やユーザー操作のためのダイアログボックスとして機能するポップアップウィンドウです。

2. モーダルの使用シーン

モーダルは、以下のような場合に一般的に使用されます。

• アラートメッセージの表示
• 操作の確認
• ユーザー情報の収集

3. モーダルのメリット

モーダルの使用には、以下のような利点があります。

• ユーザーのWebページ閲覧を中断しない
• より快適なユーザーエクスペリエンスを提供する

二、モーダルの作成

1. HTML構造

モーダルを作成するために必要なHTMLコード構造は、以下のとおりです。

<div class="modal" id="myModal">
  <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">&times;</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>

2. CSSスタイル

Bootstrapフレームワークには、モーダルの外観を制御するためのCSSクラスが用意されています。

3. JavaScriptの動作

モーダルの表示、非表示、および閉じを制御するには、JavaScriptを使用します。

// モーダルの表示
$('#myModal').modal('show');

// モーダルの非表示
$('#myModal').modal('hide');

三、モーダルオプション

1. data-* 属性

data-*属性を使用して、モーダルの動作を設定できます。以下は、一般的な属性です。

2. JavaScript オプション

JavaScriptコードにパラメータを渡すことで、モーダルオプションをカスタマイズできます。

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

四、モーダルイベント

1. イベントの種類

モーダルに関連するJavaScriptイベントを以下に示します。

2. イベント処理

JavaScriptコードを使用して、モーダルイベントをリッスンし、処理できます。

$('#myModal').on('hidden.bs.modal', function() {
  // モーダルが非表示になった後に実行する処理
});

五、モーダル例

1. 静的モーダル

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  静的モーダルを表示
</button>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">モーダルのタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        モーダルのコンテンツ
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

2. 動的モーダル

// ボタンクリック時にモーダルを動的に生成
$('#openModalButton').click(function() {
  // モーダルコンテンツを動的に生成
  var modalContent = `
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">動的モーダル</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <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>
      </div>
    </div>
  `;

  // モーダルを動的に生成
  var dynamicModal = $(
    '<div class="modal fade" id="dynamicModal" tabindex="-1" role="dialog" aria-labelledby="dynamicModalLabel" aria-hidden="true">' +
      modalContent + 
    '</div>'
  );

  // モーダルをbodyに追加
  $('body').append(dynamicModal);

  // モーダルを表示
  $('#dynamicModal').modal('show');

  // モーダルが閉じられた時の処理
  $('#dynamicModal').on('hidden.bs.modal', function () {
    // モーダルをDOMから削除
    $(this).remove();
  });
});

解説:

1. モーダルコンテンツの動的生成:

   • modalContent 変数にモーダルのHTML構造を定義します。

   • この際、Bootstrapのモーダル用のクラス (modal-dialog, modal-content, modal-header, modal-body, modal-footerなど) を使用して構造を構築します。

   • モーダルのタイトルや本文、ボタンなどの内容は必要に応じて変更できます。

2. モーダルの動的生成:

   • dynamicModal 変数に、モーダル全体のHTML構造を動的に生成します。

   • modalContent 変数に格納した内容を、モーダル全体の構造の中に埋め込みます。

   • モーダルに dynamicModal というIDを付与し、後から参照できるようにします。

3. モーダルのBodyへの追加:

   • 生成したモーダル要素 (dynamicModal) をBody要素の最後に追加します。

4. モーダルの表示:

   • modal('show') メソッドを使用して、生成したモーダルを表示します。

5. モーダルが閉じられた時の処理:

   • hidden.bs.modal イベントを使用して、モーダルが閉じられた時の処理を定義します。

   • ここでは、モーダルが閉じられた際に、DOM上からモーダル要素を削除しています。これにより、モーダルを再度開く際に、新しいモーダルが生成されるようになります。

ポイント:

• モーダルのIDは一意なものにしてください。

• モーダルを閉じるボタンには、 data-dismiss="modal" 属性を必ず追加してください。

• モーダルのコンテンツは、必要に応じてJavaScriptで動的に変更できます。

六、まとめ

このチュートリアルでは、Bootstrap 4モーダルの作成、オプション、イベント、および例について説明しました。モーダルは、ユーザーエクスペリエンスを向上させるための効果的なツールです。ぜひ、ご自身のWebページで活用してみてください。

Bootstrap 4 モーダルに関するQA

Q1: モーダルのサイズを変更するにはどうすればよいですか？

A1: モーダルのサイズを変更するには、.modal-dialogクラスに以下のクラスを追加します。

• modal-sm: 小さいモーダル
• modal-lg: 大きいモーダル
• modal-xl: 特大モーダル (Bootstrap 4.2 以上)

Q2: モーダルをページの中央に配置するにはどうすればよいですか？

A2: Bootstrap 4 のモーダルは、デフォルトでページの中央に配置されます。もし、中央からずれている場合は、CSSの定義を確認してください。

Q3: モーダルが表示されたときに特定の処理を実行するにはどうすればよいですか？

A3: shown.bs.modal イベントを使用します。このイベントは、モーダルが表示された後に発生します。

$('#myModal').on('shown.bs.modal', function() {
  // モーダルが表示された後に実行する処理
});