【JavaScript】【Bootstrap】クリック以外のイベントでモーダルダイアログを表示するには

2024-04-16Bootstrap,HTML,JavaScript

はじめに

CSSフレームワークとして広く知られているBootstrapを使うと、モーダルダイアログを簡単に作ることができます。ただし、表示するためには、ボタンやリンクをクリックする必要があります。

ここでは、直接ボタンやリンクをクリックするのではなく、他のイベント（onchangeなど）に反応してモーダルダイアログを表示する方法について紹介します。

Bootstrapでのモーダルダイアログの表示方法

Bootstrapを用いてモーダルダイアログを表示する方法は、検索するとたくさん見つかります。公式サイトのドキュメントを見ても簡単に実装できますので、ここでは公式からコピーしたものを掲載します。

<!-- モーダルダイアログを表示するためのボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- モーダルダイアログ本体 -->
<div class="modal" 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">Modal title</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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

モーダルダイアログを表示するには、モーダルダイアログのid属性に対応するdata-bs-target属性を持った<button>や<a>を用意し、これをクリックします。すなわち、onclickイベントを発生させる必要があります。

クリック以外のイベントでモーダルダイアログを表示させる

次に、クリック以外のイベントでモーダルダイアログを表示させることを考えます。このようなことはあまりないかもしれませんが、たとえば、プルダウンメニューで特定の項目を選択した場合に、モーダルダイアログを表示させることが考えられます。

プルダウンメニューで特定の項目を選択したときは、onchangeイベントが発生します。前述の通り、モーダルダイアログの表示にはonclickイベントの発生が必要なので、このままではモーダルダイアログの表示はできません。

これには、モーダルダイアログに対応した非表示の<button>を用意し、プルダウンメニューのonchangeイベントハンドラの中で、<button>に対してonclickイベントを発生させるJavaScriptを書くことで対応できます。

この方法でonchange以外のイベントにも対応させることができます。

  • (HTML)
<!-- プルダウンメニュー -->
<select id="menu">
  <option value="1">項目1</option>
  <option value="-1">---</option>
  <option value="0">項目の追加</option>
</select>

<!-- モーダルダイアログを表示するためのボタン（非表示） -->
<button type="button" id="showModal" class="btn btn-primary invisible" data-bs-toggle="modal" data-bs-target="#exampleModal">
  非表示のボタン
</button>
  • (JavaScript)
const showModalButton = document.getElementById("showModal");
const menu = document.getElementById("menu");

const onChange = (e) => {
  if(e.target.value === "0"){
    showModalButton.dispatchEvent(new Event("click"));
  }
};

menu.addEventListener("change", onChange);

CodePenにコードを載せましたので、実際の動作を確認できます（CodePenの方は実際にアイテムの追加ができるようにコードを少し変えてあります）。

See the Pen
クリック以外のイベントでモーダルダイアログを表示させる by Izadori (@izadori)
on CodePen.

おわりに

Bootstrapを使ったモーダルダイアログをクリック以外のイベントで表示させる方法について説明しました。

この例のようにプルダウンメニューの特定の項目を選択したときに、モーダルダイアログを表示させたかったのですが、調べてもボタンをクリックする方法ばかり見つかるため、今回記事にしてみました。この記事が参考になれば幸いです。

Bootstrap,HTML,JavaScript

Posted by izadori