バニラJavaScriptでモーダル外側のクリックを検知してモーダルウィンドウを閉じる方法

バニラJavaScriptだけを使って、ユーザーがモーダルウィンドウ（または任意のUI要素）の外側をクリックしたときに自動的に閉じる方法を解説します。

モーダルポップアップは、多くの場合、ユーザーにとって煩わしい存在です。特に画面全体を占めてしまう場合はなおさらで、サイトにアクセスして数秒で表示されたりすれば、ストレスを感じずにはいられません。これは愚かな設計であり、良くないUXデザインの典型例といえます。

さらにひどいケースもあります。閉じるボタン（×）を極端に小さく、分かりにくい位置に配置しているサイトです。まるでパズルを解くように閉じるボタンを探すうちにイライラが募り、そもそも何の目的でそのサイトを訪れたのか忘れてしまうほどです。

今回は、その問題をきちんと解決していきましょう。

HTML：シンプルなモーダルウィンドウ

まず、以下のコードをHTMLドキュメントに追加してください。

<main>
  <div class="modal">
    <button class="button-close-modal">X</button>

    <h2>Subscribe to my Newsletter</h2>

    <p>Get access to exclusive content that only share with my email list</p>

    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" />
  </div>
</main>

CSS：モーダルとボタンのスタイリング

.modal {
  padding: 2rem;
  border: 1px solid #eee;
  width: max-content;
  position: fixed;
  right: 0;
  bottom: 0;
  max-width: 100%;
}

.button-close-modal {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  margin-left: auto;
}

JavaScript：ドキュメント全体のクリックを検知する

以下のJavaScriptコードは、ユーザーがモーダル要素の外側をクリックしたとき、あるいは×ボタンをクリックしたときに、モーダルウィンドウを閉じます。

document.addEventListener(
  "click",
  function(event) {
    // ユーザーが×ボタンをクリックした場合、
    // またはモーダルウィンドウの外側をクリックした場合は
    // closeModal() を呼び出してモーダルを閉じる
    if (
      event.target.matches(".button-close-modal") ||
      !event.target.closest(".modal")
    ) {
      closeModal()
    }
  },
  false
)

function closeModal() {
  document.querySelector(".modal").style.display = "none"
}

コード全体は上記の通りです。次に、このコードがどのように動作しているのかを詳しく見ていきましょう。

コードの仕組み

• まず、documentオブジェクトに対してクリックイベントリスナーを設定します。これにより、HTMLドキュメント上のどこでクリックが行われてもイベントが登録され、波括弧{ .. }内の処理を毎回実行できるようになります。
• 次に、モーダルウィンドウを閉じるための2つのトリガーを用意します。1つは×ボタンのクリック、もう1つはモーダルウィンドウの外側のクリックです。
• if文の中では、「クリックされたターゲットが×ボタンと一致する場合（matches(".button-close-modal")）、または（||）クリックがモーダルウィンドウ上で発生していない場合（!event.target.closest(".modal")）」という条件を判定し、真であればcloseModal()関数を呼び出します。
• closeModal()関数が呼び出されると、.modalクラスセレクターで要素を取得し、display = 'none'を設定することでモーダルを非表示にします。

closest()メソッドは、引数として渡したセレクターに一致する、最も近い親要素を探すメソッドです。この例では、クラスセレクター（.modal）を渡しています。クリックされた要素自体がモーダル内に含まれているかどうかを判定するのに役立ちます。

一方、matches()メソッドは、event.targetが特定のセレクターと一致するかどうかをチェックします。この例では、閉じるボタンのクラスセレクターである.button-close-modalとの一致を確認しています。

この2つのメソッドを組み合わせることで、余計なライブラリに頼らずとも、直感的で使いやすいモーダルの閉じる動作を簡単に実装できます。ぜひ自分のプロジェクトでも試してみてください。