Dialog

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

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

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

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

मोडल डायलॉग

यहां मॉडल <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> दिखाया जाता है. यह नकली एलिमेंट सभी बैकड्रॉप से मेल खाता है. इसमें वह बैकग्राउंड भी शामिल है जो फ़ुलस्क्रीन एपीआई का इस्तेमाल करने पर दिखता है, उदाहरण के लिए, जब किसी ऐसे वीडियो को फ़ुल-स्क्रीन मोड में देखा जा रहा हो जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) स्क्रीन या मॉनिटर के बराबर नहीं है.

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

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 प्रॉपर्टी इनहेरिट नहीं की जाती.

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

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

डायलॉग बॉक्स के पीछे के हिस्से को किस तरह स्टाइल किया जा रहा है?

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

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

::backdrop स्यूडो-एलिमेंट के साथ.

सही!

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

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