ডায়ালগ লাইট-ডিসমিস করা

ওয়েব ফিচার: <dialog closedby>

আধুনিক মোডাল ডায়ালগে প্রায়ই "লাইট-ডিসমিস" ফিচার থাকে, যার সাহায্যে ব্যবহারকারী ব্যাকড্রপে (ডায়ালগের বাইরের অংশ) ক্লিক বা ট্যাপ করে ডায়ালগ বন্ধ করতে পারেন। closedby অ্যাট্রিবিউট কাস্টম জাভাস্ক্রিপ্ট ছাড়াই এই আচরণ চালু করার জন্য একটি ঘোষণামূলক উপায় প্রদান করে।

প্রয়োগ

লাইট-ডিসমিস চালু করতে:

  1. <dialog> এলিমেন্টে closedby="any" যোগ করুন।
  2. dialog.showModal() ব্যবহার করে ডায়ালগ খুলুন।

অ্যাট্রিবিউটের মানগুলি

  • any: লাইট-ডিসমিস (ব্যাকড্রপে ক্লিক করা), "বন্ধ করার অনুরোধ" (Esc কী) এবং ডেভেলপার মেকানিজম (যেমন, dialog.close()) চালু করে।
  • closerequest: শুধুমাত্র "অনুরোধ বন্ধ করুন" এবং ডেভেলপার মেকানিজম চালু করে। এটি মোডাল ডায়ালগের জন্য ডিফল্ট।
  • none: শুধুমাত্র ডেভেলপার মেকানিজম ডায়ালগ বন্ধ করতে পারে।

ব্যাকড্রপ স্টাইল করা হচ্ছে

showModal() ব্যবহার করে কোনও ডায়ালগ মোডাল হিসেবে খোলা হলে, ব্রাউজার একটি ::backdrop ছদ্ম-এলিমেন্ট তৈরি করে। এই ব্যাকড্রপ সম্পূর্ণ ভিউপোর্ট কভার করে এবং সরাসরি ডায়ালগের পিছনে থাকে।

/* Style the backdrop to indicate the dialog is modal */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px); /* Optional: add blur for modern browsers */
}

উদাহরণ

<!-- MANDATORY: Use closedby="any" to enable light-dismiss behavior -->
<dialog id="myDialog" closedby="any" aria-labelledby="dialogTitle">
  <form method="dialog">
    <h2 id="dialogTitle">Feedback</h2>
    <p>Click outside this box or press Esc to dismiss.</p>
    <button type="submit">Close</button>
  </form>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

সীমাবদ্ধতা ও অ্যাক্সেসিবিলিটি

  • বাধ্যতামূলক: ডিক্লারেটিভভাবে লাইট-ডিসমিস চালু করতে closedby="any" ব্যবহার করুন।
  • বাধ্যতামূলক: সবসময় showModal()-এর মাধ্যমে মোডাল ডায়ালগ খুলুন। এটি নিশ্চিত করে যে ডায়ালগটি উপরের স্তরে আছে, ফোকাস ট্র্যাপ করা হয়েছে এবং Esc কী ম্যানেজ করা হয়েছে।
  • করণীয়: ডায়ালগের জন্য অ্যাক্সেসযোগ্য নাম দিতে aria-labelledby বা aria-label ব্যবহার করুন।
  • করবেন না: নন-মডেল ডায়ালগের (show() দিয়ে খোলা) জন্য closedby ব্যবহার করবেন না, কারণ সেগুলির কোনও ব্যাকড্রপ নেই এবং লাইট-ডিসমিস ট্রিগার করবে না।
  • করবেন না: বন্ধ করার আগে হওয়া উচিত এমন গুরুত্বপূর্ণ লজিকের জন্য click ইভেন্ট ব্যবহার করবেন না; পরিবর্তে, close বা cancel ইভেন্ট শুনুন।

ফলব্যাক স্ট্র্যাটেজি

বাধ্যতামূলক: যেসব ব্রাউজারে এখনও closedby কাজ করে না, সেগুলির ক্ষেত্রে আপনাকে অবশ্যই লাইট-ডিসমিসের জন্য একটি ফলব্যাক প্রয়োগ করতে হবে। এর জন্য নিম্নলিখিত স্ক্রিপ্ট ব্যবহার করে চেক করুন যে ডায়ালগ কন্টেন্টের সীমানার বাইরে ক্লিক করা হয়েছে কিনা:

const dialog = document.querySelector('dialog');

// Fallback for browsers without closedby support
if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    // 1. When clicking the backdrop, the event target is the dialog element itself.
    // Ignore clicks where the target is a child element inside the dialog.
    if (event.target !== dialog) return;

    // 2. Check if the click coordinates fall within the dialog's content box.
    // This distinguishes between a click on the backdrop vs a click on the dialog's background/padding.
    const rect = dialog.getBoundingClientRect();
    const isDialogContent = (
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width
    );

    if (isDialogContent) return;

    // 3. Since the click was outside the content area (on the backdrop), manually close the dialog.
    dialog.close();
  });
}