संवाद

डायलॉग एलिमेंट, एचटीएमएल में किसी भी तरह के डायलॉग को दिखाने के लिए एक उपयोगी एलिमेंट है. जानें कि यह कैसे काम करता है.

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

डायलॉग, मोडल (सिर्फ़ डायलॉग में मौजूद कॉन्टेंट के साथ इंटरैक्ट किया जा सकता है) या नॉन-मोडल (डायलॉग के बाहर मौजूद कॉन्टेंट के साथ इंटरैक्ट किया जा सकता है) हो सकते हैं. मोडल डायलॉग, पेज के बाकी कॉन्टेंट के ऊपर दिखते हैं. पेज का बाकी हिस्सा इनर्ट होता है. साथ ही, डिफ़ॉल्ट रूप से यह हल्के रंग के बैकड्रॉप से ढका होता है.

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

मोडल डायलॉग

यहां एक मोडल <dialog> का उदाहरण दिया गया है. "Open modal dialog" बटन की मदद से डायलॉग बॉक्स खोलें. डायलॉग बॉक्स खुलने के बाद, इसे तीन तरीकों से बंद किया जा सकता है: एस्केप बटन दबाकर, 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 बटन दबाने पर, नॉन-मोडल डायलॉग बॉक्स बंद नहीं होते हैं. इसलिए, नॉन-मोडल डायलॉग को बंद करने का तरीका शामिल करना और भी ज़रूरी हो जाता है. ऐसा करते समय, अगर क्लोज़र डायलॉग से बाहर है, तो ध्यान रखें कि फ़ोकस उस एलिमेंट पर जाएगा जिसने डायलॉग खोला है. इससे उपयोगकर्ता को बेहतर अनुभव नहीं मिल सकता.

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

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

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

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

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

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

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

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

डायलॉग बॉक्स खुलने पर, बूलियन open एट्रिब्यूट मौजूद होता है. इसका मतलब है कि डायलॉग बॉक्स चालू है और इसके साथ इंटरैक्ट किया जा सकता है. .show() या .showModal() के बजाय open एट्रिब्यूट जोड़कर डायलॉग बॉक्स खोलने पर, वह मोडल-लेस होगा. 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 प्रॉपर्टी इनहेरिट नहीं की जाती है.

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

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