バニラJavaScriptを使用して、ユーザーがモーダルウィンドウの外側をクリックしたときにモーダルウィンドウを閉じる方法

バニラJavaScriptを使用して、ユーザーがモーダルウィンドウの外側をクリックしたときに、モーダルウィンドウまたは任意のUI要素を閉じる方法を学びます。

モーダルポップアップは、特に画面全体を占める場合は、一般的に煩わしいものです。ウェブサイトにアクセスしてから数秒以内に発生すると、特に迷惑になります。愚かで、UXデザインが悪いです。

一部のWebサイトは、それを次のレベルに引き上げ、クローズモーダル（X）ボタンを非常に小さく、奇妙な位置に配置して、パズルを解きながら本当に腹を立てるのに十分な時間があるため、なぜそのWebサイトにアクセスしたのかを忘れてしまう可能性があります。そもそも。

修正しましょう。

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コードは、ユーザーがモーダル要素の外側をクリックするか、Xボタンをクリックすると、モーダルウィンドウを閉じます。

document.addEventListener(
  "click",
  function(event) {
    // If user either clicks X button OR clicks outside the modal window, then close modal by calling 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つの方法/ターゲットを設定します。
• ifステートメントの内部 「ターゲットがボタンと一致する場合（matches(".button-close-modal") ）または（|| ）ターゲットがモーダルウィンドウで発生していません!event.target.closest(".modal") 、次にcloseModal()を呼び出します 機能。
• closeModal()の場合 関数が呼び出され、.modalが選択されます クラスセレクターとdisplay = 'none'で非表示にします 。

closest() メソッドは、渡したセレクターを持つ要素に最も近い一致する親を探します。この場合、クラスセレクター（.modal）を渡します。 。

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