HTML Dialog Element
In this page:
<dialog id="id">
Content
<button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<script>
document.getElementById("id").showModal();
</script>dialog एलिमेंट
dialog टैग आपके वेबपेज पर एक नेटिव, पॉप-अप modal डायलॉग बॉक्स परिभाषित करता है। यह एक साधारण कंटेनर एलिमेंट है जो डिफ़ॉल्ट रूप से तब तक छुपा रहता है जब तक इसे नेटिव JavaScript मेथड्स या open एट्रिब्यूट से खोला न जाए।
- नेटिव, एक्सेसिबल पॉप-अप विंडोज़ और modal अलर्ट बॉक्सेस बनाने के लिए dialog टैग का उपयोग करें।
- Accepted attributes:
- open — boolean; shows the dialog
- Global attributes apply (id, class)
- method="dialog" on a form inside closes it
उदाहरण: The dialog Element
<dialog>
<p>This is a modal dialog</p>
</dialog>Dialogs को खोलना और बंद करना
अपने dialog बॉक्स के साथ इंटरैक्ट करने के लिए, आप नेटिव JavaScript मेथड्स का उपयोग करते हैं: show() इसे एक साधारण पॉप-अप के रूप में खोलता है, showModal() इसे एक modal के रूप में खोलता है (बैकग्राउंड फोकस को लॉक करते हुए), और close() इसे साफ तरीके से बंद कर देता है।
- बैकग्राउंड फोकस को लॉक करने और स्क्रीन-रीडर नेविगेशन में मदद के लिए हमेशा अपने dialogs को showModal() से खोलें।
- Accepted values:
- open — boolean attribute; non-modal display
- show() — open non-modal
- showModal() — open modal
- close(returnValue) — close
उदाहरण: Opening and Closing Dialogs
<dialog id="myDialog">
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open</button>Backdrop Overlay को कस्टमाइज़ करना
जब आप showModal() का उपयोग करके किसी dialog बॉक्स को modal के रूप में खोलते हैं, तो ब्राउज़र अपने-आप उसके पीछे एक गहरा backdrop overlay दिखाता है, जो modal को मुख्य पेज से लॉक करके अलग कर देता है।
आप CSS ::backdrop pseudo-element का उपयोग करके इस backdrop को आसानी से कस्टमाइज़ कर सकते हैं।
उदाहरण: Customizing the Backdrop Overlay
<dialog id="myDialog">Content</dialog>
<style>
dialog::backdrop {
background: rgba(0, 0, 0, 0.6);
}
</style>कीबोर्ड फोकस मैनेज करना
नेटिव dialog बॉक्सेस में बिल्ट-इन कीबोर्ड नेविगेशन सपोर्ट होता है।
जब आप कोई modal dialog खोलते हैं, तो ब्राउज़र अपने-आप कर्सर फोकस को modal के अंदर रखता है और उसे वहीं लॉक कर देता है, ताकि कीबोर्ड यूज़र्स गलती से बैकग्राउंड लिंक्स पर नेविगेट न कर जाएँ।
उदाहरण: Managing Keyboard Focus
<dialog id="myDialog">
<button>Focused automatically</button>
</dialog>
<script>
document.getElementById('myDialog').showModal();
</script>Dialogs के अंदर Form Integration
आप HTML forms को सीधे अपने dialog बॉक्सेस के अंदर इंटीग्रेट कर सकते हैं। फॉर्म के method एट्रिब्यूट को dialog सेट करके, फॉर्म सबमिशन अपने-आप dialog बॉक्स को बंद कर देगा, और बिना पेज रीलोड किए इनपुट वैल्यूज़ को सेव कर लेगा।
- साफ-सुथरे, रिस्पॉन्सिव इन-डायलॉग कन्फर्मेशन फॉर्म्स बनाने के लिए dialog form मेथड का उपयोग करें।
- Accepted values:
- form method — dialog | get | post
- method="dialog" — closes the dialog on submit; returnValue is the submit button value
उदाहरण: Form Integrations inside Dialogs
<dialog id="myDialog">
<form method="dialog">
<button value="confirm">Confirm</button>
</form>
</dialog>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: