Bootstrapのモーダルの使い方を解説。jQueryでshow/hideする方法も

css-html

Bootstrapのモーダルは、よく使うパーツですが動作が複雑で、使いこなすのが難しいです。私もうまく使えず苦労しました。

今回はモーダルの使い方を基本から、カスタマイズ、他のパーツとの組合せまで解説します。これを読めば、モーダルの使い方をマスターできるでしょう。

目次

  1. モーダルウィンドウとは?
  2. Bootstrapのモーダルの基本的な使い方
  3. モーダルをカスタマイズする方法

1.モーダルウィンドウとは?

モーダルウィンドウとは、コンテンツを浮かび上がるポップアップ表示するウィンドウのことです。ヘルプやアラート、簡単なメッセージの表示などでよく使用します。

Bootstrapのモーダルはこんなデザインです。

2.Bootstrapのモーダルの基本的な使い方

ではモーダルの使い方を解説していきます。

Bootstrapの導入方法については以下の記事を参考にしてみて下さい。

【初心者向け】Bootstrap4を導入/設定する3つの方法を解説

基本的なモーダルの導入の流れは、ボタン・リンクを設置=>モーダルの中身を設置の2ステップです。htmlを書くだけで作成が可能ですが、jQueryを使って手動で操作することもできます。

まずは、htmlだけで作成する方法をみていきます。こちらはdata属性で値を渡すことでモーダルを起動します。

ボタンを以下のように設置します。

<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
>
  モーダルを起動する
</button>

data-targetの値に気をつけてください。ここに書かれている#exampleModalがどのモーダルを開くかを指定しています。ここの値と次に書くモーダルのidが一致しないとうまく開くことができません。

モーダル部分は以下のように書きます。

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

一番外側のdivのidが”exampleModal”となっていることを確認してください。ここがbutttonと揃っていればモーダルは起動します。

もう一つモーダルを起動させる方法として、jQueryを使用する方法があります。モーダルのDOMを取得して、メソッドを使用することで起動できます。

これは、クリックする後に何らかの処理を挟みたい場合によく使用します。

Bootstrapのモーダルにはいくつかメソッドが用意されています。表示を切り替えるtoggle、モーダルを表示させるshow、モーダルを隠すhideが主なメソッドです。

こんな感じで使用できます。

// toggleを使用する時
$("#exampleModal").modal("toggle");
// showを使用する時
$("#exampleModal").modal("show");
// hideを使用する時
$("#exampleModal").modal("hide");

例えば、画面のロードと同時にモーダルを表示させる場合以下のようなコードで実現できます。

<script>
  $(document).ready(function(){
    $("#exampleModal").modal("show");
  });
</script>

これで先ほどのコードと合わせることで、画面を開いた時にモーダルが表示されるようになります。

以上が基本的な使い方です。

3.モーダルをカスタマイズする方法

次にモーダルをカスタマイズする3つの方法を解説します。モーダルの表示位置を変更する、モーダルの横幅を変更する、モーダルの内容を変更するの3つです。

1.モーダルの表示位置を変更する

modal-dialogクラスのついているdivタグにmodal-dialog-centeredを追加することで表示位置が真ん中になります。

モーダルを以下のように書き換えます。modal-dialog-centeredを追加しましょう。

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <!-- ここにmodal-dialog-centeredを追加 -->
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

こうすると表示位置が垂直方向に中央になります。以下の画像ように、表示位置が下がれば成功です。

2.モーダルの横幅を変更する

モーダルの横幅変更も同様に、modal-dialogクラスのついているdivタグにクラスを追加することでサイズを変えられます。

大きくする場合にはmodal-lgを、小さくするにはmodal-smを追加すること動作します。以下のコードでは、modal-lgでサンプルを作成してみました。

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <!-- ここにmodal-lg/modal-smを追加 -->
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

画像のように、横に伸びたモーダルを作成することができます。

3.モーダルの内容を変更する

Bootstrapで用意されているイベントを利用して、表示前に処理を入れて動的にテキストを書き換えることができます。

Bootstrapのモーダルのイベントの一つであるshow.bs.modalを使用します。これは、モーダルを起動するリンクやボタンがクリックされた直後に着火します。

これを利用して、リンクやボタンに持たせたdataプロパティの値を取得することでモーダルの内容を書き換えて起動します。

完成品はこんな動きになります。

モーダルのタイトル、フォームの内容がボタンごとに変わっているのがわかると思います。

サンプルのコードは以下の通りです。ボタンを3つ用意します。data-whateverでボタンごとに違う値を設定します。

<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
  data-whatever="@mdo"
>
  Open modal for @mdo
</button>
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
  data-whatever="@fat"
>
  Open modal for @fat
</button>
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
  data-whatever="@getbootstrap"
>
  Open modal for @getbootstrap
</button>

モーダル本体はこのように準備します。

<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label"
              >Recipient:</label
            >
            <input type="text" class="form-control" id="recipient-name" />
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label"
              >Message:</label
            >
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

以下のコードをbodyタグの一番下に用意して、モーダルがトリガーされた時の処理を書きます。

<script>
  $("#exampleModal").on("show.bs.modal", function(event) {
    // モーダルを起動したボタンを取得
    var button = $(event.relatedTarget);
    // data-whateverの値を取得
    var recipient = button.data("whatever");

    // id = exmapleModalのモーダルを取得
    var modal = $(this);
    // モーダルのタイトルの書き換え
    modal.find(".modal-title").text("New message to " + recipient);
    // inputタグの内容を書き換え
    modal.find(".modal-body input").val(recipient);
  });
</script>

このようにしてモーダルの内容を書き換えることができます。

モーダルの内容を書き換える方法は他にも、Ajaxでサーバーからデータを引き出して書き換えることもできます。

RailsでのAjaxの方法を以前まとめたので、よければ参考にしてください。

【Rails】Ajax通信のリンク・フォームを作成方法を3ステップで解説

ちなみに、モーダルには他にもイベントが設定されています。

Eventのタイプ 説明
show.bs.modal モーダルを開くメソッドのshowが呼ばれた時に着火する。リンクやボタンで起動するときは、クリック直後に着火。
shown.bs.modal モーダルがユーザーに見えるようになった時に着火する。モーダルのCSSのロード終了時。
hide.bs.modal モーダルを閉じるメソッドcloseが呼ばれてた時に着火する。×やオーバーレイ部分がクリックされた直後に着火。
hidden.bs.modal モーダルが見えなくなった時に着火する。モーダルのCSSのアニメが終了した時に着火

このイベントを下記のようにonで拾うことで事前処理や事後処理を書くことができます。

$('#myModal').on('hidden.bs.modal', function (e) {
  // 処理
})

以上でモーダルの解説を終わります。これからもBootstrapの解説記事を追加していくので、よかったら読んでみてください。

参考ページ

https://getbootstrap.com/docs/4.0/components/modal/