Dialog

मॉडल डायलॉग, किसी वेब पेज पर एक खास तरह का पॉप-अप बॉक्स होता है. यह एक पॉप-अप होता है, जो उपयोगकर्ता को खुद पर फ़ोकस करने में रुकावट डालता है. यहां हैं डायलॉग को पॉप अप करने के लिए, इस्तेमाल के कुछ मान्य उदाहरण मौजूद हैं, लेकिन किया जाना चाहिए. मोडल डायलॉग, उपयोगकर्ताओं को किसी खास कॉन्टेंट पर फ़ोकस करने के लिए मजबूर करते हैं. साथ ही, कुछ समय के लिए कम से कम उस कॉन्टेंट को अनदेखा कर सकते हैं पेज के बाकी हिस्से पर.

डायलॉग या तो मोडल हो सकते हैं (सिर्फ़ डायलॉग के कॉन्टेंट के साथ इंटरैक्ट किया जा सकता है) या नॉन-मोडल (अब भी इंटरैक्ट किया जा सकता है) कॉन्टेंट को डायलॉग के बाहर दिखाया जा सकता है). मोडल डायलॉग, पेज के बाकी कॉन्टेंट के सबसे ऊपर दिखते हैं. बाकी पेज का इनर्ट है और डिफ़ॉल्ट रूप से यह आधा-पारदर्शी बैकग्राउंड की वजह से साफ़ नहीं दिखता है.

डायलॉग बनाने के लिए सिमैंटिक एचटीएमएल <dialog> एलिमेंट इसमें सिमेंटिक्स, कीबोर्ड इंटरैक्शन, और HTMLDialogElement इंटरफ़ेस की सभी प्रॉपर्टी और तरीके शामिल होते हैं.

मोडल डायलॉग

यहां मॉडल <dialog> का एक उदाहरण दिया गया है. "मॉडल डायलॉग खोलें" वाला डायलॉग खोलें बटन. एक बार खुल जाने पर, डायलॉग को बंद करने के तीन तरीके होते हैं: escape कुंजी, ऐसा बटन जिसमें formmethod="dialog" है सेट है (या फ़ॉर्म में method="dialog" सेट है), और HTMLDialogElement.close() तरीका सेट है.

HTMLDialogElement में तीन मुख्य तरीके हैं. साथ ही, HTMLElement से इनहेरिट किए गए सभी तरीके हैं.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

क्योंकि इस <dialog> को HTMLDialogElement.showModal() के ज़रिए खोला गया था तरीका है, तो यह एक मॉडल डायलॉग है. मॉडल डायलॉग खोलने से, डायलॉग के अलावा बाकी सब कुछ बंद हो जाता है और धुंधला हो जाता है. अगर आपको डायलॉग के बाहर यूज़र इंटरफ़ेस (यूआई) पर कर्सर घुमाने पर, आपको दिखेगा कि सभी एलिमेंट ऐसे काम कर रहे हैं जैसे pointer-events: none; सेट किया गया था; यहां तक कि डायलॉग बॉक्स खोलने वाले बटन से भी इंटरैक्शन की प्रतिक्रिया नहीं मिलती.

डायलॉग बॉक्स खुलने पर, फ़ोकस डायलॉग में चला जाता है. फ़ोकस उस डायलॉग में, क्रम से लगाए जाने वाले कीबोर्ड के नेविगेशन क्रम में पहले एलिमेंट पर सेट होता है. अगर tab बटन को बार-बार दबाया जाता है, तो ध्यान रखें कि मॉडल डायलॉग के होने पर सिर्फ़ डायलॉग के कॉन्टेंट पर फ़ोकस किया जा सकता है खोलें. जब तक डायलॉग खुला रहता है, मॉडल डायलॉग के बाहर की सभी चीज़ें निष्क्रिय रहती हैं.

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

एक ग्लोबल inert एट्रिब्यूट है, जिसका इस्तेमाल किसी ऐक्टिव एलिमेंट के अलावा, किसी एलिमेंट और उसके सभी डिसेंडेंट को बंद करने के लिए किया जा सकता है डायलॉग. जब showModal() का इस्तेमाल करके मॉडल डायलॉग खोला जाता है, तो इनऐक्टिविटी या बंद करने की सुविधा बिना किसी शुल्क के उपलब्ध होती है; एट्रिब्यूट सेट नहीं किया गया है.

डायलॉग के अलावा बाकी सब कुछ धुंधला करने वाली बैकड्रॉप को ::backdrop का इस्तेमाल करके स्टाइल किया जा सकता है नकली एलिमेंट. बैकड्रॉप सिर्फ़ तब दिखता है, जब .showModal() तरीके का इस्तेमाल करके <dialog> को दिखाया जाता है. यह नकली एलिमेंट सभी बैकड्रॉप से मेल खाता है. इसमें वह बैकग्राउंड भी शामिल है जो FullScreen API का इस्तेमाल करने पर दिखता है, उदाहरण के लिए, जब किसी ऐसे वीडियो को फ़ुल-स्क्रीन मोड में देखा जा रहा हो जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) स्क्रीन या मॉनिटर के बराबर नहीं है.

नॉन-मॉडल डायलॉग

HTMLDialogElement.show() भी इसी तरह से एक डायलॉग बॉक्स खोलता है, लेकिन इसमें बैकग्राउंड जोड़े बिना या कोई भी चीज़ निष्क्रिय होने की वजह से नहीं खुलते. escape बटन, नॉन-मॉडल डायलॉग बंद नहीं करता. इसलिए, यह सुनिश्चित करना और भी महत्वपूर्ण है कि आप अपनी नॉन-मॉडल डायलॉग को बंद करने के बारे में ज़्यादा जानें. ऐसा करते समय, अगर डायलॉग से बाहर का हिस्सा करीब है, तो ध्यान रहे कि फ़ोकस एलिमेंट पर जाएगा जिन्होंने डायलॉग बॉक्स खोला. शायद इससे लोगों को बेहतरीन अनुभव नहीं मिलेगा.

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

डायलॉग बॉक्स बंद करना

डायलॉग बॉक्स बंद करने के लिए, आपको HTMLDialogElement.close() तरीके की ज़रूरत नहीं है. आपको JavaScript की बिलकुल ज़रूरत नहीं है. <dialog> बंद करने के लिए JavaScript के बिना, <form> या formmethod="dialog" पर method="dialog" सेट करके डायलॉग के तरीके वाला फ़ॉर्म शामिल करें बटन पर.

जब कोई उपयोगकर्ता dialog तरीके से डेटा सबमिट करता है, तो उपयोगकर्ता के डाले गए डेटा की स्थिति को बनाए रखा जाता है. जब कोई सबमिट इवेंट मौजूद हो—तो फ़ॉर्म को कंस्ट्रेंट की पुष्टि की प्रोसेस से गुज़रना पड़ता है (जब तक कि novalidate सेट नहीं किया जाता)—उपयोगकर्ता के डेटा को मिटाया या सबमिट नहीं किया जाता. JavaScript के बिना 'बंद करें' बटन को इस तरह लिखा जा सकता है:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

आपने शायद autofocus एट्रिब्यूट देखा होगा इस उदाहरण में, क्लोज़िंग <button> पर सेट है. जिन एलिमेंट में autofocus एट्रिब्यूट <dialog> में सेट किया गया है वे नहीं मिलेंगे पेज लोड पर फ़ोकस करें (जब तक कि पेज के साथ डायलॉग दिखाई न दे). हालांकि, डायलॉग खोलने पर उन पर फ़ोकस होगा.

डिफ़ॉल्ट रूप से, जब कोई डायलॉग खोला जाता है, तो डायलॉग में फ़ोकस करने लायक पहले एलिमेंट पर फ़ोकस तब तक रहता है, जब तक कि कोई अलग डायलॉग के अंदर एलिमेंट में autofocus एट्रिब्यूट सेट है. 'बंद करें' बटन पर autofocus एट्रिब्यूट को सेट करने से, यह पक्का होता है कि डायलॉग खोलने पर फ़ोकस होता है. हालांकि, <dialog> में मौजूद autofocus को शामिल किया जा रहा है का बहुत ध्यान रखते हुए ही किया जाना चाहिए. ऑटोफ़ोकस वाले एलिमेंट को स्किप करने से पहले, सीक्वेंस में मौजूद सभी एलिमेंट को स्किप किया जा सकता है. इस एट्रिब्यूट के बारे में हमने फ़ोकस लेसन में बताया है.

HTMLDialogElement इंटरफ़ेस में returnValue शामिल है प्रॉपर्टी. method="dialog" का इस्तेमाल करके फ़ॉर्म सबमिट करने पर, returnValue को 'सबमिट करें' बटन के name पर सेट कर दिया जाता है फ़ॉर्म सबमिट करें. अगर हम <button type="submit" name="toasty">close</button> लिखते, तो returnValue toasty होता.

डायलॉग बॉक्स खोलने पर, बूलियन open एट्रिब्यूट मौजूद है, इसका मतलब है कि डायलॉग चालू है और उसके साथ इंटरैक्ट किया जा सकता है. इसके बजाय, open एट्रिब्यूट जोड़कर कोई डायलॉग खोला जाता है .show() या .showModal() से, डायलॉग बॉक्स मॉडल-रहित होगा. HTMLDialogElement.open इस प्रॉपर्टी से true या false नतीजे दिखाता है. यह इस बात पर निर्भर करता है कि डायलॉग, इंटरैक्शन के लिए उपलब्ध है या नहीं. इस बात से कोई फ़र्क़ नहीं पड़ता कि वह मॉडल है या नहीं.

हालांकि, डायलॉग बॉक्स खोलने के लिए JavaScript, पसंदीदा तरीका है. इसमें पेज लोड होने पर open एट्रिब्यूट शामिल है और इसके बाद, इसे हटा दिया जाता है इसे .close() की मदद से, यह पक्का किया जा सकता है कि JavaScript के न होने पर भी डायलॉग उपलब्ध रहे.

ज़्यादा जानकारी

tabindex का इस्तेमाल न करें

डायलॉग बॉक्स को खोलने के लिए चालू किए गए एलिमेंट और उसमें मौजूद 'बंद करें' बटन (साथ ही, अन्य कॉन्टेंट) पर ये फ़ाइलें भेजी जा सकती हैं आपका फ़ोकस सही है और इंटरैक्टिव है. <dialog> एलिमेंट, इंटरैक्टिव नहीं है और फ़ोकस नहीं करता. tabindex प्रॉपर्टी न जोड़ें उस डायलॉग बॉक्स में ही जोड़ा जा सकता है.

ARIA रोल

इंप्लिसिट भूमिका dialog है. अगर डायलॉग यह एक पुष्टि विंडो है. इसमें एक अहम मैसेज दिखाया जा रहा है, जिसके लिए पुष्टि करना या किसी दूसरे उपयोगकर्ता के जवाब की ज़रूरत है, role="alertdialog" सेट करें. डायलॉग का एक ऐसा नाम भी होना चाहिए जिसे ऐक्सेस किया जा सके. अगर दिखने वाले टेक्स्ट में ऐक्सेस किया जा सकने वाला नाम हो, तो aria-labelledby="idOfLabelingText" जोड़ें.

सीएसएस की डिफ़ॉल्ट सेटिंग

ध्यान दें कि ब्राउज़र dialog के लिए डिफ़ॉल्ट स्टाइलिंग देते हैं. Firefox, Chrome, और Edge सेट किए गए color: CanvasText; background-color: Canvas; और Safari, color: black; background-color: white; को अपने उपयोगकर्ता-एजेंट स्टाइलशीट में सेट करते हैं. color इनहेरिट किया गया है यह ट्रैफ़िक dialog से शुरू हो रहा है, body या :root से नहीं. इसकी जानकारी देना मुश्किल हो सकता है. background-color प्रॉपर्टी इनहेरिट नहीं की गई है.

देखें कि आपको कितना समझ आया है

डायलॉग एलिमेंट के बारे में अपनी जानकारी परखें.