डायलॉग और मोडल अधिकांश वेब एप्लिकेशन के अभिन्न अंग हैं। जबकि उन्हें हाथ से बनाना कोई जटिल काम नहीं है, यह एक ऐसा काम है जो किसी भी वेब डेवलपर के लिए जल्दी ही थकाऊ हो जाता है। उन्हें हाथ से बनाने का सामान्य विकल्प किसी और द्वारा बनाए गए घटक का उपयोग करना है।

हालाँकि, इस दृष्टिकोण के साथ कुछ समस्याएं हैं। इतने सारे विकल्प हैं, यह जानना मुश्किल हो जाता है कि कौन सा घटक उपयोग करना सबसे अच्छा होगा, और ऐसे घटकों की उपस्थिति को अनुकूलित करना कभी-कभी एक संवाद बनाने जितना ही कठिन हो सकता है हाथ से। सौभाग्य से, एक और विकल्प है: HTML संवाद तत्व।

डायलॉग एलिमेंट क्या है?

HTML डायलॉग एलिमेंट एक बिल्ट-इन HTML टैग है (जैसे डिव या स्पैन), जो डेवलपर्स को कस्टम डायलॉग और मोडल बनाने की अनुमति देता है। संवाद तत्व 2014 से क्रोम और ओपेरा में मौजूद है, लेकिन हाल ही में सभी प्रमुख ब्राउज़रों द्वारा समर्थित हो गया है।

डायलॉग एलिमेंट का उपयोग क्यों करें?

संवाद तत्व का उपयोग करने का प्राथमिक कारण सुविधा है। यह उन संवादों को बनाना आसान बनाता है जो या तो इनलाइन दिखाई दे सकते हैं या मोडल के रूप में दिखाई दे सकते हैं, केवल एक HTML टैग और जावास्क्रिप्ट की कुछ पंक्तियों के साथ।

instagram viewer

संवाद तत्व कस्टम संवाद बनाने और डिबग करने या किसी और के घटक को आयात करने की आवश्यकता को हटा देता है। CSS के साथ स्टाइल करना भी बहुत आसान है।

संवाद तत्व के लिए ब्राउज़र समर्थन

दुर्भाग्य से, संवाद तत्व के लिए ब्राउज़र समर्थन बेहतर हो सकता है। यह कुछ चेतावनियों के साथ मार्च 2022 तक सभी प्रमुख ब्राउज़रों के नवीनतम संस्करणों में समर्थित है।

फ़ायरफ़ॉक्स 98 से पुराना कोई भी फ़ायरफ़ॉक्स ब्राउज़र केवल तभी इसका समर्थन करेगा जब यह ब्राउज़र सेटिंग्स में मैन्युअल रूप से सक्षम हो, और सफारी 15.4 से पहले का कोई भी सफारी संस्करण इसका बिल्कुल भी समर्थन नहीं करता है। पूर्ण ब्राउज़र समर्थन विवरण पर उपलब्ध हैं क्या मैं उपयोग कर सकता हूँ.

शुक्र है, इसका मतलब यह नहीं है कि संवाद तत्व अनुपयोगी है। Google Chrome टीम एक पॉलीफ़िल बनाए रखती है जिसे आप यहां पा सकते हैं Github संवाद तत्व के लिए जो इसके लिए उन ब्राउज़रों पर भी समर्थन प्रदान करता है जहां यह मूल रूप से समर्थित नहीं है।

अपने वर्तमान स्वरूप में, संवाद तत्व में पहुंच-योग्यता संबंधी समस्याएं हो सकती हैं, इसलिए यह कस्टम संवाद घटक का उपयोग करने के लिए अधिक उपयुक्त हो सकता है जैसे a11y-संवाद उत्पादन अनुप्रयोगों में।

डायलॉग एलिमेंट का उपयोग कैसे करें

संवाद तत्व का उपयोग करने का तरीका प्रदर्शित करने के लिए, आप इसका उपयोग एक सामान्य वेबसाइट सुविधा बनाने के लिए करेंगे: एक डिलीट बटन के लिए एक पुष्टिकरण मोड।

साथ चलने के लिए केवल एक HTML फ़ाइल की आवश्यकता है।

1. HTML फ़ाइल सेट करें

उक्त फ़ाइल बनाकर प्रारंभ करें और इसे index.html नाम दें।

इसके बाद, HTML फ़ाइल की संरचना स्थापित करें और पृष्ठ के बारे में कुछ बुनियादी मेटा-सूचना प्रदान करें, ताकि यह सभी उपकरणों पर ठीक से प्रस्तुत हो सके।

index.html में निम्न कोड टाइप करें:

<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<मेटा http-equiv="एक्स-UA- संगत" सामग्री ="आईई = बढ़त">
<मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाना = 1.0">
<शीर्षक>डायलॉग डेमो</title>
</head>
<शैली></style>


<तन></body>
<लिखी हुई कहानी></script>
</html>

इस परियोजना के लिए आवश्यक सभी सेटअप हैं।

2. मार्कअप लिखना

इसके बाद, डिलीट बटन के साथ-साथ डायलॉग एलिमेंट के लिए मार्कअप लिखें।

index.html के बॉडी टैग में निम्न कोड टाइप करें:

<डिव क्लास ="बटन-कंटेनर">
<बटन>
मिटाना वस्तु
</button>
</div>
<संवाद>
<डिव>
 क्या आप निस्चय ही यह कार्य करना चाहते हैं मिटानायह वस्तु?
</div>
<डिव>
<बटन वर्ग ="बंद करना">
 हाँ
</button>
<बटन वर्ग ="बंद करना">
 नहीं
</button>
</div>
</dialog>

उपरोक्त HTML बनाएगा:

  • एक डिलीट बटन।
  • संवाद तत्व।
  • संवाद के अंदर दो बटन।

यदि आपके ब्राउज़र में index.html खुला है, तो स्क्रीन पर दिखाई देने वाला एकमात्र तत्व डिलीट बटन होगा। इसका मतलब यह नहीं है कि कुछ भी गलत है, संवाद तत्व को दिखाई देने के लिए बस थोड़ी सी जावास्क्रिप्ट की आवश्यकता होती है।

3. जावास्क्रिप्ट जोड़ना

अब, वह कोड लिखें जो उपयोगकर्ता द्वारा डिलीट बटन पर क्लिक करने पर डायलॉग को खोलेगा, साथ ही डायलॉग को बंद करने की अनुमति देने के लिए कोड भी लिखें।

index.html के स्क्रिप्ट टैग में निम्नलिखित टाइप करें:

स्थिरांक मोडल = दस्तावेज़.querySelector ("संवाद")
दस्तावेज़.क्वेरी चयनकर्ता (".बटन-कंटेनर बटन").addEventListener("क्लिक", () => {
मॉडल.शोमोडल();
});
स्थिरांक क्लोज़बीटीएनएस = दस्तावेज़.getElementsByClassName ("बंद करें");
for (btn of closeBtns) {
 btn.addEventListener("क्लिक", () => {
मॉडल।बंद करना();
 })
}

यह कोड क्वेरी चयनकर्ता विधि का उपयोग करता है बटन और संवाद के संदर्भ प्राप्त करने के लिए। यह तब प्रत्येक बटन पर एक क्लिक इवेंट श्रोता को जोड़ता है।

आप परिचित हो सकते हैं जावास्क्रिप्ट में ईवेंट श्रोता, जिनका आप स्वयं उपयोग कर सकते हैं. डिलीट बटन से जुड़ा इवेंट श्रोता बटन क्लिक होने पर डायलॉग प्रदर्शित करने के लिए शोमोडल () विधि को कॉल करता है।

मोडल के अंदर प्रत्येक बटन में एक ईवेंट श्रोता जुड़ा होता है जो क्लिक किए जाने पर संवाद को छिपाने के लिए बंद () विधि का उपयोग करता है।

यहां तक ​​​​कि अगर कोई जावास्क्रिप्ट नहीं है जो कोड में क्लोज़ () विधि को कॉल करता है, तो उपयोगकर्ता अपने कीबोर्ड पर एस्केप कुंजी दबाकर भी मोडल को बंद कर सकते हैं।

अब जब यह जावास्क्रिप्ट जगह में है, यदि कोई उपयोगकर्ता डिलीट बटन पर क्लिक करता है, तो मोडल खुल जाएगा, और हां या ना बटन पर क्लिक करने से मोडल बंद हो जाएगा।

खुला मोडल इस तरह दिखना चाहिए:

ध्यान देने वाली एक बात यह है कि डायलॉग एलिमेंट पहले से ही कुछ स्टाइल के साथ आता है, भले ही index.html में कोई CSS न हो। मोडल पहले से ही केंद्रित है, इसकी एक सीमा है, चौड़ाई सामग्री तक सीमित है, और इसमें कुछ डिफ़ॉल्ट पैडिंग है।

मोडल खुला होने पर उपयोगकर्ता पृष्ठभूमि में किसी भी चीज़ के साथ बातचीत (क्लिक, चयन) नहीं कर सकते।

संवाद तत्व स्वयं को एक मोडल के बजाय पृष्ठ के प्रवाह के भाग के रूप में भी प्रदर्शित कर सकता है। इसे आज़माने के लिए, जावास्क्रिप्ट में पहले ईवेंट श्रोता को इस प्रकार बदलें:

दस्तावेज़.क्वेरी चयनकर्ता (".बटन-कंटेनर बटन").addEventListener("क्लिक", () => { मोडल.शो (); });

इस कोड में केवल एक चीज बदल गई है कि कोड शोमोडल () विधि के बजाय शो () विधि को कॉल कर रहा है। अब, जब कोई उपयोगकर्ता आइटम हटाएं बटन पर क्लिक करता है, तो मोडल को इस तरह इनलाइन खोलना चाहिए:

4. स्टाइलिंग जोड़ें

इसके बाद, CSS लिखकर डायलॉग के रूप और उसकी पृष्ठभूमि को अनुकूलित करें।

CSS संवाद की सीमा को कम कर देगा, इसकी अधिकतम चौड़ाई को सीमित कर देगा, और फिर पृष्ठभूमि को काला कर देगा, साथ ही बटनों में थोड़ा स्टाइल जोड़ देगा।

डायलॉग को स्टाइल करना अपने आप में सीधा है, लेकिन डायलॉग की पृष्ठभूमि को लक्षित करने वाली स्टाइल को जोड़ने के लिए बैकड्रॉप स्यूडो क्लास आवश्यक है।

index.html के स्टाइल टैग में निम्न कोड पेस्ट करें:

डायलॉग:: बैकड्रॉप {
 पृष्ठभूमि: काला;
अस्पष्टता: 0.5;
}
बटन {
 सीमा-त्रिज्या: 2px;
 पृष्ठभूमि-रंग: सफेद;
 सीमा: 1px ठोस काला;
 मार्जिन: 5px;
 बॉक्स-छाया: 1px 1px 2px ग्रे;
}
संवाद {
 अधिकतम-चौड़ाई: 90vw;
 सीमा: 1px ठोस काला;
}

जब संवाद खुला होता है, तो इसे अब इस तरह दिखना चाहिए:

और आपने पूरी तरह कार्यात्मक संवाद बनाया है।

डायलॉग एलिमेंट मॉडल बनाने का एक शानदार तरीका है

हाल ही में सभी प्रमुख ब्राउज़रों में समर्थन प्राप्त करने वाले HTML संवाद तत्व का उपयोग करके, वेब डेवलपर्स अब पूरी तरह कार्यात्मक निर्माण कर सकते हैं, एक HTML टैग और जावास्क्रिप्ट की कुछ पंक्तियों के साथ आसानी से अनुकूलन योग्य मोडल और संवाद और किसी तीसरे पक्ष पर भरोसा करने की आवश्यकता के बिना समाधान।

संवाद तत्व में Google Chrome टीम द्वारा अनुरक्षित एक पॉलीफ़िल है, जो डेवलपर्स को उन ब्राउज़र संस्करणों में संवाद का उपयोग करने की अनुमति देता है जो इसका समर्थन नहीं करते हैं।