प्लैटफ़ॉर्म कंट्रोल के डायलॉग बॉक्स को खारिज करें

जब कोई मॉडल डायलॉग खुला होता है, तो उपयोगकर्ता उसे खारिज करने के लिए जाने-पहचाने कंट्रोल इस्तेमाल करने की उम्मीद करते हैं: कीबोर्ड पर Esc बटन दबाना, मोबाइल प्लैटफ़ॉर्म पर 'वापस जाएं' बटन या जेस्चर का इस्तेमाल करना या सहायक टेक्नोलॉजी की मदद से खारिज करने वाला जेस्चर इस्तेमाल करना.

जब <dialog> एलिमेंट को पहली बार लॉन्च किया गया था, तब इसे Esc बटन से खारिज किया जा सकता था. हालांकि, इसे मोबाइल पर 'वापस जाएं' बटन/जेस्चर जैसे अन्य प्लैटफ़ॉर्म कंट्रोल से खारिज नहीं किया जा सकता था. <dialog> एलिमेंट के लिए closedby एट्रिब्यूट को जोड़ा गया है. इससे, बंद करने के अनुरोधों के लिए प्लैटफ़ॉर्म के हिसाब से ज़्यादा कंट्रोल का जवाब देने की सुविधा को <dialog> एलिमेंट के लिए लागू किया गया है. ये एलिमेंट, मॉडल स्टेट में खोले जाते हैं. इसका मतलब है कि जब JavaScript में <dialog> एलिमेंट के showModal() तरीके से या show-modal इन्वोकर कमांड के साथ डिक्लेरेटिव तरीके से खोला जाता है. इसलिए, अगर डेवलपर पहले से ही <dialog> एलिमेंट का इस्तेमाल कर रहे हैं, तो उन्हें कोई बदलाव करने की ज़रूरत नहीं है.

<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

जब किसी डायलॉग को मोडल स्टेट में खोला जाता है, तो closedby एट्रिब्यूट के बिना मौजूद डायलॉग, बंद करने के अनुरोधों का जवाब उसी तरह देता है जिस तरह closedby एट्रिब्यूट को साफ़ तौर पर closerequest पर सेट करने पर देता है.

<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

अगर आपको “लाइट डिसमिस” व्यवहार भी चाहिए, तो आपको closedby को any पर सेट करना होगा:

<dialog closedby="any" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>

फ़ॉलबैक रणनीतियां

<dialog> एलिमेंट, मॉडल स्टेट में खोले जाने पर, Esc बटन से पहले ही खारिज किए जा सकते हैं. इसलिए, फ़ॉलबैक की ज़रूरत नहीं है. मोबाइल के 'वापस जाएं' बटन/जेस्चर से, बंद करने के अनुरोधों को लागू करने का कोई अच्छा तरीका नहीं है. इसलिए, इस सुविधा को परतदार वृद्धि के तौर पर अपनाना आसान है. खास तौर पर, तब जब मॉडल डायलॉग को खारिज करने के अन्य तरीके मौजूद हों. इसी तरह, closedby="any" का इस्तेमाल करके <dialog> एलिमेंट को आसानी से खारिज करने की सुविधा को प्रोग्रेसिव एनहैंसमेंट माना जा सकता है.