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

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

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

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

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

किसी डायलॉग बॉक्स को बंद करने के लिए, आपको HTMLDialogElement.close() तरीके की ज़रूरत नहीं है. आपको JavaScript की ज़रूरत नहीं है. <dialog> को JavaScript के बिना बंद करने के लिए, डायलॉग बॉक्स वाला एक फ़ॉर्म शामिल करें. इसके लिए, <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 एट्रिब्यूट सेट करने से, यह पक्का होता है कि डायलॉग खोले जाने पर उसे फ़ोकस मिले. हालांकि, autofocus को <dialog> में शामिल करना सिर्फ़ बहुत सोच-समझकर ही किया जाना चाहिए. ऑटोफ़ोकस एलिमेंट को छोड़ने से पहले के क्रम में आने वाले सभी एलिमेंट को स्किप कर दिया जाता है. हमने इस एट्रिब्यूट के बारे में फ़ोकस लेसन बताया है.

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 प्रॉपर्टी के साथ.

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