डायलॉग बॉक्स को खारिज करना

मॉडर्न मॉडल डायलॉग में अक्सर "लाइट-डिसमिस" की सुविधा होती है. इससे उपयोगकर्ता, बैकड्रॉप (डायलॉग के बाहर का हिस्सा) पर क्लिक या टैप करके डायलॉग को बंद कर सकते हैं. closedby एट्रिब्यूट, कस्टम JavaScript के बिना इस व्यवहार को चालू करने का एक डिक्लेरेटिव तरीका उपलब्ध कराता है.

लागू करना

लाइट-डिसमिस की सुविधा चालू करने के लिए:

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();
  });
}