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

• HTML `` एलिमेंट ब्राउज़र-native modal और non-modal dialog box बनाता है, और modal पेज के बाकी हिस्से को inert स्थिति में रखकर interaction रोकता है
• खोलने और बंद करने के बुनियादी तरीके showModal(), show(), close() हैं, और ``, Invoker Commands API, Popover API से भी declarative control संभव है
• closedby attribute यह तय करता है कि यूज़र dialog को किन रास्तों से बंद कर सकता है: any, closerequest, none; और खोलने के तरीके के अनुसार default behavior बदलता है
• accessibility में initial focus और explicit close button महत्वपूर्ण हैं, और showModal() से खुले dialog में default रूप से पहला focusable element और Esc key close मिलते हैं
• styling के लिए :modal, :open, ::backdrop का उपयोग करें, और animation में display, overlay, @starting-style, transition-behavior: allow-discrete जैसे discrete transition handling की जरूरत होती है

---

`` की भूमिका और modal behavior

• HTML `` एलिमेंट modal और non-modal dialog box बनाने के लिए एक एलिमेंट है
• modal dialog दूसरे UI elements के साथ interaction रोकता है और पेज के बाकी हिस्से को inert स्थिति में कर देता है
• non-modal dialog खुले रहने पर भी पेज के बाकी हिस्से के साथ interaction जारी रखने देता है

open state और close policy

• `` में global attributes शामिल होते हैं, लेकिन tabindex attribute का उपयोग नहीं करना चाहिए
  • `` खुद interactive element नहीं है और focus नहीं लेता
  • अंदर का content और close button focus ले सकते हैं और interact कर सकते हैं
• open attribute बताता है कि dialog active state में है और interact किया जा सकता है
  • अगर open attribute नहीं है, तो यह यूज़र को दिखाई नहीं देता
  • dialog दिखाते समय open attribute की बजाय .show() या .showModal() का उपयोग recommended है
  • open attribute से खुला `` non-modal होता है
  • non-modal dialog की open/close state को open attribute toggle करके बदला जा सकता है, लेकिन यह recommended नहीं है
• closedby attribute specify करता है कि यूज़र dialog को किस तरह बंद कर सकता है
  • any: तीनों तरीकों से बंद किया जा सकता है
    • dialog के बाहर click या tap जैसे light dismiss
    • Esc key, mobile back या dismiss gesture जैसे platform-specific actions
    • HTMLDialogElement.close() call करने वाला button या `` submit जैसे developer-defined तरीके
  • closerequest: platform-specific actions और developer-defined तरीकों से बंद किया जा सकता है
  • none: केवल developer-defined तरीके से बंद किया जा सकता है
  • अगर valid closedby value नहीं है, तो showModal() से खुले होने पर closerequest जैसा, और अन्य मामलों में none जैसा behavior होता है

JavaScript और declarative control

• JavaScript से `` को दिखाना और बंद करना सीधे control किया जा सकता है
  • showModal(): modal dialog दिखाएं
  • show(): non-modal dialog दिखाएं
  • close(): dialog बंद करें
  • के अंदर को method="dialog" से submit करके भी बंद किया जा सकता है
  • modal dialog Esc key से भी बंद किया जा सकता है
• Invoker Commands API button attributes भर से modal dialog खोलना और बंद करना संभव बनाता है
  • `` में commandfor और command attributes specify करें
  • dialog के लिए इस्तेमाल किए जा सकने वाले commands "show-modal", "close", "request-close" हैं

Open dialog

  This dialog was opened using an invoker command.

  Close

• Popover API non-modal dialog को declaratively खोलना, बंद करना और toggle करना संभव बनाता है
  • `` में popover attribute जोड़कर उसे popover बनाएं
  • button या input element में popovertarget, popovertargetaction specify करें
  • popover dialog non-modal होता है, इसलिए बाहर click करके बंद किया जा सकता है
  • अगर popover value specify नहीं की जाती, तो default value "auto" इस्तेमाल होती है और light dismiss active हो जाता है
  • popover="manual" light dismiss को disable करता है, और close button जैसा अलग तरीका चाहिए
  • अगर popovertargetaction छोड़ा जाता है, तो default value toggle इस्तेमाल होती है

form submit और close handling

• हर `` में close mechanism जरूरी है, और यह physical keyboard न होने वाली devices पर भी काम करना चाहिए
• बंद करने के कई तरीके हैं
  • के अंदर पर method="dialog" set करके submit करना
  • light dismiss active होने पर dialog के बाहर click करना
  • allowed dialog में Esc key दबाना
  • HTMLDialogElement.close() call करना
• `` या submit button का formmethod="dialog" dialog को बंद करता है
  • form control state save होती है, लेकिन submit नहीं होती
  • returnValue active button की value पर set होता है
• required inputs वाले form में user agent, value दिए जाने तक normal submit से dialog को बंद नहीं होने देता
  • close button पर formnovalidate का उपयोग करके form validation bypass किया जा सकता है
  • JavaScript में dialog.close() call करके भी बंद किया जा सकता है

focus और accessibility

• showModal() से `` खोलने पर default रूप से पहले nested focusable element पर focus set होता है
• किसी खास dialog में सबसे उपयुक्त initial focus location specify करने के लिए autofocus attribute का उपयोग किया जा सकता है
  • अगर तुरंत interact करने वाला element नहीं है, तो close button पर autofocus रखना recommended है
  • dynamically rendered dialog की तरह initial focus location अनिश्चित हो, तो `` खुद उपयुक्त initial focus location हो सकता है
• सभी users बंद कर सकें, इसके लिए confirm, cancel, close button जैसे explicit buttons शामिल करना सबसे robust तरीका है
• showModal() से call किया गया dialog default रूप से Esc key से बंद होता है
  • non-modal dialog default रूप से Esc key से बंद नहीं होता
  • keyboard users expect करते हैं कि modal dialog Esc key से बंद होगा
  • अगर कई modal dialogs खुले हैं, तो Esc key केवल सबसे आखिर में दिखाए गए dialog को बंद करे; `` का उपयोग करने पर browser यह behavior प्रदान करता है
• native `` usability और accessibility features देता है, जिन्हें अन्य elements से बने custom dialogs में सीधे replicate करना पड़ता है
• browser `` को ARIA role="dialog" इस्तेमाल करने वाले custom dialog की तरह expose करता है
  • showModal() से call किया गया `` implicit रूप से aria-modal="true" रखता है
  • show(), open attribute, default display change से दिखाया गया `` aria-modal="false" के रूप में expose होता है
  • modal dialog implement करते समय `` और उसके content के अलावा बाकी सब कुछ inert के रूप में render होना चाहिए, और showModal() उपयोग करने पर browser यह behavior देता है

CSS styling और backdrop

• `` को normal element की तरह element name से select किया जा सकता है
• state-based styling के लिए :modal, :open pseudo-classes का उपयोग किया जा सकता है
• modal dialog की background को ::backdrop pseudo-element से style किया जा सकता है
  • showModal() से dialog दिखाते समय `` के पीछे दिखाई देने वाले backdrop पर apply होता है
  • inert state में पीछे के content को blur, dark या cover किया जा सकता है

उदाहरणों से use pattern

• Invoker Commands API example command="show-modal" button से dialog खोलता है और command="close" button से बंद करता है
  • “Open dialog” button से खोला जा सकता है
  • “Close” button या Esc key से बंद किया जा सकता है
• Popover API example popover, popovertarget, popovertargetaction से non-modal dialog खोलता और बंद करता है
  • “Close” button, Esc key, dialog के बाहर select करके बंद किया जा सकता है
  • popover="manual" इस्तेमाल करने पर light dismiss disable हो जाता है
• open attribute example page load पर पहले से खुले HTML-only non-modal dialog बनाता है
  • `` के “OK” button से बंद किया जा सकता है
  • बंद होने के बाद फिर से खोलने का तरीका provide नहीं किया गया है
  • non-modal dialog दिखाने के लिए HTMLDialogElement.show() का उपयोग preferred है
• modal dialog example .showModal() से खोलता है और close() से बंद करता है
  • ::backdrop से gradient background style करता है
  • dialog खुलने पर dialog के बाहर का हिस्सा inert state में चला जाता है, इसलिए document से interact नहीं किया जा सकता
• returnValue example form और button values से dialog की return value handle करता है
  • default returnValue empty string होता है, या dialog के अंदर form submit करने वाले button की value होती है
  • “Confirm” button selected value को close() में pass करके return value के रूप में उपयोग करता है
  • Esc key से बंद करने पर returnValue update नहीं होता और close event भी fire नहीं होता, इसलिए `` text update नहीं होता

`` animation

• hidden `display: none`, और shown display: block होता है
• display state बदलने पर इसे top layer और accessibility tree में जोड़ा या हटाया जाता है
• `` को animate करने के लिए display property animatable होनी चाहिए
  • supporting browsers display को discrete animation तरीके से handle करते हैं
  • none से block में बदलते समय 0% point पर block में transition होता है, इसलिए पूरी animation के दौरान दिखता है
  • block से none में बदलते समय 100% point पर none में transition होता है, इसलिए पूरी animation के दौरान दिखता है

• CSS transition से animation

  • CSS transition से `` animate करने के लिए ये features जरूरी हैं
  • @starting-style: dialog खुलने पर हर बार transition start values provide करता है
  • display transition: transition के दौरान dialog को visible display value में बनाए रखता है
  • overlay transition: top layer removal को transition complete होने तक delay करता है
  • transition-behavior: allow-discrete: normally animate न होने वाले display, overlay के discrete transitions enable करता है
  • जिन browsers में :open pseudo-class support नहीं है, वहां dialog[open] attribute selector से open state style की जा सकती है
  • `` हर बार दिखाए जाने पर display: none से display: block में बदलता है, इसलिए हर entry transition में @starting-style से dialog:open style की ओर transition होता है

• keyframe animation

  • CSS keyframe animation में transition से अलग constraints होते हैं
  • @starting-style provide नहीं करता
  • display value को keyframe के अंदर शामिल करता है
  • allow-discrete को explicitly enable करने की जरूरत नहीं होती
  • overlay को keyframe में set करने की जरूरत भी नहीं होती
  • backdrop fade-out dialog बंद होने पर backdrop के DOM से तुरंत हट जाने के कारण animate नहीं किया जा सकता

technical summary

• content category: flow content, sectioning root
• allowed content: flow content
• start tag और end tag दोनों required हैं और tag omission नहीं है
• allowed parents: flow content स्वीकार करने वाले सभी elements
• implicit ARIA role: dialog
• allowed ARIA role: alertdialog
• DOM interface: HTMLDialogElement
• specification: HTML # the-dialog-element