मोडल सीएसएस जावास्क्रिप्ट

| | | | | | | | | | | | | | | | | | | | | |

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

आरंभ करना

h2>

यह सुनिश्चित करने के लिए कि आप हमारे वेबपेज पर एक मोडल देख सकते हैं, सुनिश्चित करें कि आपके पास सही निर्भरताएँ हैं। इस प्रोजेक्ट के लिए हमें Bootstrap, Popper.JS और jQuery की जरूरत है। सभी प्राप्त करने में सहायता के लिए बूटस्ट्रैप क्विकस्टार्ट पृष्ठ पर नेविगेट करें आपकी निर्भरताएँ।

यह आप पर निर्भर करता है कि हमें किस पैकेज की आवश्यकता है, लेकिन सबसे आसान और सबसे शुरुआती अनुकूल सामग्री वितरण नेटवर्क - सीडीएन - का उपयोग jQuery, Popper.js और बूटस्ट्रैप के लिए करना है। अपने <स्क्रिप्ट src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js" नेक्स्ट एसिंक्रोनस> <स्क्रिप्ट स्रोत = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js" एसिंक्रोनस रीडायरेक्ट>

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

निष्कर्ष

बूटस्ट्रैप का उपयोग करके एक मोडल बनाते समय मुख्य बाधा यह सुनिश्चित करना है कि प्रलेखन ठीक से तैयार है। अधिक बार यदि कोई त्रुटि होती है, तो यह कॉपी / पेस्ट त्रुटि, सीडीएन की स्थिति में त्रुटि या आपके एचटीएमएल के इन-हेड / बॉडी में शीट शैली के कारण होने की संभावना है, या आपके CSS सही तत्व को लक्षित नहीं कर रहा है।

इनमें से कुछ शैलियाँ कोशिश के साथ कस्टम आती हैं। और जो त्रुटि बहुत अच्छी है वह यह है कि बूटस्ट्रैप के लिए प्रलेखन बहुत व्यापक है - यदि आपने कोई अन्य ढांचा नहीं सीखा है या इससे पहले पैकेजिंग, आप भाग्यशाली हैं कि दस्तावेज़ीकरण काफी बड़ा है और समझने में काफी सरल है