Bootstrapモーダルの基本実装を完全解説！data-bs-toggleとdata-bs-targetで簡単に開閉しよう

1. Bootstrapのモーダルとは何かを知ろう

1. Bootstrapのモーダルとは何かを知ろう

Bootstrapのモーダルとは、画面の上に重なって表示される小さなウィンドウのことです。たとえば「本当に削除しますか？」のような確認メッセージや、入力フォームを表示するときによく使われます。

パソコンを使っていると、突然画面の真ん中にメッセージが出てきて、背景が少し暗くなることがあります。それと同じ仕組みがBootstrapモーダルです。背景を操作できなくして、今表示している内容に集中させる役割があります。

2. data-bs-toggleとdata-bs-targetの役割

2. data-bs-toggleとdata-bs-targetの役割

Bootstrapモーダルを開閉するときに重要なのが、data-bs-toggle と data-bs-target という2つの属性です。これらはHTMLタグの中に書くだけで動作します。

data-bs-toggleは「どんな機能を使うか」を指定します。モーダルの場合は modal と書きます。data-bs-targetは「どのモーダルを開くか」を指定するためのものです。

難しく感じるかもしれませんが、これは「このボタンを押したら、このモーダルを開いてください」と伝えているだけです。

3. ボタンをクリックしてモーダルを開く基本例

3. ボタンをクリックしてモーダルを開く基本例

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sampleModal">
  モーダルを開く
</button>

このコードでは、ボタンにdata-bs-toggleとdata-bs-targetが設定されています。#sampleModalは、後ほど作成するモーダルの名前です。シャープ記号は「idを指定します」という意味になります。

4. モーダル本体のHTML構造を理解しよう

4. モーダル本体のHTML構造を理解しよう

<div class="modal fade" id="sampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">お知らせ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>これはBootstrapのモーダルです。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

モーダルは決まった入れ子構造になっています。箱の中に箱が入っているイメージです。modal-dialogは大きさを決める箱、modal-contentは実際の中身を入れる箱と考えると分かりやすいです。

5. モーダルを閉じる仕組みを理解する

5. モーダルを閉じる仕組みを理解する

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
  キャンセル
</button>

モーダルを閉じるときは、data-bs-dismissという属性を使います。これは「このボタンを押したら閉じる」という意味です。

閉じる処理もJavaScriptを書かなくてよいので、初心者でも安心して使えます。

6. 複数のモーダルを使い分ける考え方

6. 複数のモーダルを使い分ける考え方

Bootstrapでは、複数のモーダルを使うこともできます。その場合は、それぞれ違うidを付けて、data-bs-targetで指定します。

これは「部屋番号が違うドアを開ける」ようなものです。正しい番号を指定しないと、開けたいモーダルは表示されません。

7. モーダルが動かないときのよくある原因

7. モーダルが動かないときのよくある原因

初心者の方がつまずきやすいのは、idの指定ミスです。data-bs-targetとモーダルのidが一致していないと、何も起こりません。

また、BootstrapのJavaScriptファイルが読み込まれていない場合も動作しません。HTMLが正しくても、裏側の仕組みが動いていないと表示されないので注意が必要です。

8. モーダルは確認や通知に便利なUI部品

8. モーダルは確認や通知に便利なUI部品

Bootstrapモーダルは、ユーザーに大事な情報を伝えるための部品です。画面を切り替えずに表示できるため、操作の流れを止めにくいという特徴があります。

data-bs-toggleとdata-bs-targetを使った基本実装を覚えておけば、多くの場面で活用できます。まずはシンプルな構造を理解することが大切です。