`<dialog>`: डायलॉग एलिमेंट

 (developer.mozilla.org)
3 पॉइंट द्वारा GN⁺ 2024-12-08 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें

<dialog>: डायलॉग एलिमेंट

  • बिल्ट-इन: <dialog> एलिमेंट modal या non-modal डायलॉग, alert, inspector, subwindow जैसे इंटरैक्टिव एलिमेंट्स को दर्शाता है। मार्च 2022 से यह अधिकांश ब्राउज़रों में उपलब्ध है.

विशेषताएँ

  • open: यह दर्शाता है कि डायलॉग सक्रिय है और इंटरैक्ट किया जा सकता है। यदि open एट्रिब्यूट सेट नहीं है, तो यह उपयोगकर्ता को दिखाई नहीं देगा। .show() या .showModal() मेथड का उपयोग करने की सिफारिश की जाती है.

उपयोग नोट्स

  • HTML <form> एलिमेंट method="dialog" एट्रिब्यूट का उपयोग करके डायलॉग को बंद कर सकता है।
  • CSS ::backdrop pseudo-element का उपयोग करके modal डायलॉग की पृष्ठभूमि को स्टाइल किया जा सकता है।
  • autofocus एट्रिब्यूट उस एलिमेंट पर जोड़ा जाना चाहिए जिससे डायलॉग खुलते ही तुरंत इंटरैक्ट करना हो।
  • ध्यान रखें कि <dialog> एलिमेंट में tabindex एट्रिब्यूट न जोड़ें.

एक्सेसिबिलिटी

  • डायलॉग लागू करते समय उपयोगकर्ता फोकस को सही तरीके से सेट करना महत्वपूर्ण है।
  • showModal() मेथड से डायलॉग खोलने पर फोकस पहले focusable एलिमेंट पर सेट हो जाता है।
  • यह सुनिश्चित करने का सबसे विश्वसनीय तरीका है कि सभी उपयोगकर्ता डायलॉग बंद कर सकें, इसके लिए एक स्पष्ट बटन शामिल करें.

उदाहरण

केवल HTML डायलॉग

  • केवल HTML से non-modal डायलॉग बनाने का उदाहरण। open एट्रिब्यूट के कारण पेज लोड होने पर डायलॉग खुला रहता है.

modal डायलॉग बनाना

  • .showModal() मेथड का उपयोग करके modal डायलॉग खोलने का उदाहरण। इसे Esc कुंजी या डायलॉग के भीतर मौजूद "Close" बटन से बंद किया जा सकता है.

डायलॉग के रिटर्न वैल्यू को संभालना

  • <dialog> एलिमेंट के returnValue का उपयोग करने का उदाहरण। form का उपयोग करके modal डायलॉग बंद किया जा सकता है.

आवश्यक form input वाले डायलॉग को बंद करना

  • जब डायलॉग के अंदर के form में आवश्यक input हों, तब formnovalidate एट्रिब्यूट का उपयोग करके उसे बंद किया जा सकता है.

डायलॉग एनीमेशन

  • <dialog> एलिमेंट की display प्रॉपर्टी को animate करके डायलॉग में एनीमेशन जोड़ा जा सकता है.

तकनीकी सारांश

  • कॉन्टेंट कैटेगरी: flow content, sectioning root
  • अनुमत कॉन्टेंट: flow content
  • निहित ARIA भूमिका: dialog
  • DOM इंटरफ़ेस: HTMLDialogElement

विनिर्देश

  • HTML standard # the-dialog-element

ब्राउज़र संगतता

  • अधिकांश प्रमुख ब्राउज़रों में <dialog> एलिमेंट और open एट्रिब्यूट का पूर्ण समर्थन है.

यह भी देखें

  • HTMLDialogElement इंटरफ़ेस
  • HTMLDialogElement के close और cancel events
  • HTMLDialogElement का open एट्रिब्यूट
  • HTML एलिमेंट का inert global एट्रिब्यूट
  • CSS ::backdrop pseudo-element

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.