संवाद

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

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

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

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

मोडल डायलॉग

यहां मोडल <dialog> का एक उदाहरण दिया गया है. "मोडल डायलॉग बॉक्स खोलें" बटन का इस्तेमाल करके डायलॉग बॉक्स खोलें. डायलॉग बॉक्स खुलने के बाद, उसे तीन तरीकों से बंद किया जा सकता है: Esc बटन दबाकर, 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> या formmethod="dialog" पर method="dialog" सेट करें.

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

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

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

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

HTMLDialogElement इंटरफ़ेस में returnValue प्रॉपर्टी शामिल है. method="dialog" के साथ फ़ॉर्म सबमिट करने पर, returnValue को 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 प्रॉपर्टी इनहेरिट नहीं की जाती.

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

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

डायलॉग के पीछे मौजूद जगह को स्टाइल कैसे किया जाता है?

::background सूडो-एलिमेंट की मदद से.

फिर से कोशिश करें.

::backdrop सूडो-एलिमेंट की मदद से.

सही!

background प्रॉपर्टी के साथ.

फिर से कोशिश करें.