วิธีปิดหน้าต่าง Modal เมื่อผู้ใช้คลิกด้านนอกด้วย vanilla JavaScript

เรียนรู้วิธีปิดหน้าต่างโมดอลหรือองค์ประกอบ UI ใดๆ เมื่อผู้ใช้คลิกภายนอกหน้าต่างด้วย vanilla JavaScript

ป๊อปอัปโมดอลมักสร้างความรำคาญ โดยเฉพาะอย่างยิ่งเมื่อกินพื้นที่ทั้งหน้าจอของคุณ เป็นเรื่องที่น่ารำคาญอย่างยิ่งเมื่อเกิดขึ้นภายในไม่กี่วินาทีที่คุณเข้าสู่เว็บไซต์ มันงี่เง่าและเป็นการออกแบบ UX ที่ไม่ดี

บางเว็บไซต์ยกระดับขึ้นไปอีกระดับและตัดสินใจสร้างปุ่มปิดโมดอล (X) ให้เล็กและอยู่ในตำแหน่งที่แปลกจนคุณมีเวลามากพอที่จะหงุดหงิดจริงๆ ขณะไขปริศนา ซึ่งคุณอาจลืมไปว่าทำไมคุณถึงไปที่เว็บไซต์นั้นใน อันดับ 1

มาแก้ไขกันเถอะ

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 ต่อไปนี้จะปิดหน้าต่าง modal หากผู้ใช้คลิกนอกองค์ประกอบ modal หรือหากพวกเขาคลิกที่ปุ่ม 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 ได้รับการลงทะเบียนแล้ว และตอนนี้เราสามารถเรียกใช้ฟังก์ชันสำหรับการคลิกทุกครั้งภายในวงเล็บปีกกา { .. } .
• จากนั้น เราตั้งค่าสองวิธี/เป้าหมายสำหรับการปิดหน้าต่างโมดอล ไม่ว่าจะด้วยการคลิกปุ่มหรือด้วยการคลิกนอกหน้าต่างโมดอล
• ภายใน คำสั่ง if เราพูดว่า “ถ้าเป้าหมายตรงกับปุ่ม (matches(".button-close-modal") ) หรือ (|| ) เป้าหมายไม่ได้เกิดขึ้นในหน้าต่างโมดอล !event.target.closest(".modal") จากนั้นเรียก closeModal() ฟังก์ชัน.
• เมื่อ closeModal() เรียกฟังก์ชันก็จะเลือก .modal ตัวเลือกคลาสและซ่อนด้วย display = 'none' .

closest() เมธอดจะค้นหาพาเรนต์ที่ใกล้เคียงที่สุดกับองค์ประกอบที่มีตัวเลือกที่คุณส่ง ในกรณีนี้ เราส่งผ่านตัวเลือกคลาส (.modal )

matches() เมธอดตรวจสอบว่า event.target ตรงกับตัวเลือกเฉพาะหรือไม่ ในกรณีนี้คือตัวเลือกคลาสปุ่มปิด .button-close-modal .