आधुनिक इंटरैक्टिव HTML: dialog, details, popover, contenteditable

अपनी UI लाइब्रेरीज़ को आधुनिक HTML की नेटिव प्रिमिटिव्स से बदलें: मोडल डायलॉग, अनन्य अकॉर्डियन, पॉपओवर और संपादन योग्य क्षेत्र।

10 मिनट · 3 प्रश्न

<dialog> उस चीज़ को नेटिव रूप से हल करता है जिसे मोडल लाइब्रेरीज़ ने वर्षों तक जोड़-तोड़ कर बनाया है। showModal() तत्व को top layer में प्रक्षेपित करता है - किसी भी z-index के ऊपर -, बाकी दस्तावेज़ को inert बना देता है (कोई फ़ोकस नहीं, कोई क्लिक नहीं) और ::backdrop स्यूडो-तत्व को उजागर करता है। दूसरी ओर, show() एक गैर-मोडल डायलॉग प्रदर्शित करता है, न किसी निष्क्रियता के साथ और न ही किसी backdrop के साथ। हाल ही का closedby=any एट्रिब्यूट बाहर क्लिक करके बंद करने की सुविधा जोड़ता है।

<dialog id="confirm-dlg">
  <form method="dialog">
    <p>Delete this item?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Confirm</button>
  </form>
</dialog>

एक <form method=dialog> डायलॉग को बिना किसी नेटवर्क सबमिशन के बंद कर देता है: सक्रिय करने वाले बटन का value dialog.returnValue बन जाता है, जिसे close इवेंट आपको पढ़ने देता है। Escape कुंजी पहले cancel उत्सर्जित करके एक मोडल डायलॉग को बंद करती है, जिसे यदि इनपुट प्रगति पर है तो आप preventDefault() के साथ रद्द कर सकते हैं।

const dlg = document.getElementById("confirm-dlg");
dlg.showModal();
dlg.addEventListener("close", () => {
  console.log(dlg.returnValue); // "ok" or "cancel"
});

Popover API बिना JavaScript के मेनू, समृद्ध टूलटिप और टोस्ट को कवर करती है: तत्व पर popover और किसी बटन पर popovertarget लगाएँ, और ब्राउज़र top layer, light dismiss (बाहर क्लिक, Escape) और auto पॉपओवर के आपसी बंद होने को संभालता है। showModal() के विपरीत, एक पॉपओवर पेज को inert नहीं बनाता। beforetoggle और toggle इवेंट आपको हर संक्रमण को रद्द करने या देखने देते हैं।

<button popovertarget="user-menu">Menu</button>
<div id="user-menu" popover>
  <button>Profile</button>
  <button>Log out</button>
</div>

<details> बिना किसी स्क्रिप्ट के सुलभ संक्षिप्त करने योग्य सामग्री प्रदान करता है, और एक साझा name एट्रिब्यूट एक अनन्य समूह बनाता है: एक को खोलने से बाकी बंद हो जाते हैं। हर अवस्था परिवर्तन पर वहाँ toggle इवेंट सक्रिय होता है। संपादन पक्ष पर, contenteditable किसी भी तत्व को एक समृद्ध इनपुट क्षेत्र में बदल देता है; इसका plaintext-only संस्करण किसी भी मार्कअप को मना करता है, और beforeinput इवेंट लाभप्रद रूप से अप्रचलित document.execCommand API की जगह लेता है।

<details name="faq" open>
  <summary>Delivery time?</summary>
  <p>Within 48 hours.</p>
</details>
<details name="faq">
  <summary>Return policy?</summary>
  <p>Within 30 days.</p>
</details>

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. showModal() show() की तुलना में क्या लाता है?
   • यह डायलॉग बंद होने तक JavaScript निष्पादन को अवरुद्ध कर देता है
   • यह डायलॉग को top layer में रखता है, बाकी दस्तावेज़ को inert बनाता है और ::backdrop को सक्षम करता है
   • यह केवल पेज को स्क्रॉल होने से रोकता है
2. कई <details> पर एक समान name एट्रिब्यूट क्या पैदा करता है?
   • उन्हें पैरेंट फ़ॉर्म में एक साथ सबमिट किया जाता है
   • कुछ नहीं: name details पर एक वैध एट्रिब्यूट नहीं है
   • एक अनन्य अकॉर्डियन: एक को खोलने से बाकी अपने आप बंद हो जाते हैं
3. एक auto पॉपओवर और एक manual पॉपओवर के बीच व्यवहारगत अंतर क्या है?
   • auto को light dismiss (बाहर क्लिक, Escape) मिलता है और यह बाकी auto पॉपओवर को बंद कर देता है; manual तब तक खुला रहता है जब तक इसे स्पष्ट रूप से बंद न किया जाए
   • manual को top layer में नहीं रखा जा सकता
   • auto पेज लोड होने पर अपने आप खुल जाता है