ভ্যানিলা জাভাস্ক্রিপ্ট সহ ব্যবহারকারীরা যখন এটির বাইরে ক্লিক করেন তখন কীভাবে একটি মডেল উইন্ডো বন্ধ করবেন

ভ্যানিলা জাভাস্ক্রিপ্টের সাহায্যে ব্যবহারকারী যখন এর বাইরে ক্লিক করেন তখন কীভাবে একটি মডেল উইন্ডো বা যেকোনো 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;
}

জাভাস্ক্রিপ্ট:নথিতে সমস্ত ক্লিক সনাক্ত করুন

নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি মোডাল উইন্ডোটি বন্ধ করে দেবে যদি ব্যবহারকারী হয় মডেল উপাদানের বাইরে ক্লিক করেন, অথবা যদি তারা 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 .