10 फ्री जावास्क्रिप्ट मोडल विंडो प्लगइन्स

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

लेकिन, क्यों जब खरोंच से कुछ डिजाइन आप JS लाइब्रेरी का उपयोग कर सकते हैं? मैंने एकत्र किया है सर्वोत्तम मुफ्त जावास्क्रिप्ट-संचालित मोडल स्क्रिप्ट यहाँ आप को खुश करने के लिए और अपने पसंदीदा बाहर एकल.

ये सभी हैं पूरी तरह से मुक्त और खुला स्रोत, इसलिए आप कोड को संपादित कर सकते हैं और अपनी साइट को आवश्यकतानुसार फिट कर सकते हैं.

1. झुनझुना

मेरी पसंदीदा मुफ्त मोडल स्क्रिप्ट में से एक है Tingle.js. आईटी इस वेनिला जावास्क्रिप्ट पर कोई निर्भरता के साथ बनाया गया, इसलिए आपको किसी jQuery या Zepto लाइब्रेरी की आवश्यकता नहीं है.

इसके अलावा, यह एक काफी छोटा पुस्तकालय है, हालांकि यह है अनुकूलन के लिए बहुत सारे विकल्प. आप कुछ ही सेटिंग्स के साथ CSS बदलाव, जावास्क्रिप्ट मोडल एनिमेशन और पूरे उपयोगकर्ता अनुभव को बदल सकते हैं.

Tingle.js होने के लिए डिज़ाइन किया गया है पूरी तरह से सुलभ और उत्तरदायी, इसलिए यह मोबाइल उपकरणों पर काम करता है और पुराने ब्राउज़रों को भी सपोर्ट करता है.

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

2. वेनिला मोडल

यहाँ एक मॉडल है जिसे मैंने हाल ही में पाया है और यह है एक बहुत से बहुत आसान है. वेनिला मोडल एक के साथ अपने नाम के लिए सच खड़ा है शुद्ध वेनिला स्क्रिप्ट मोडल को शक्ति देना, साथ में सीएसएस संक्रमण.

यह बात बहुत छोटी और अति लचीली है कस्टम सीएसएस खिड़कियों को पुनर्स्थापित करने के लिए. इसमें यह भी है कुछ विकल्प आप जावास्क्रिप्ट के साथ बदल सकते हैं, यह DOM फ़ंक्शंस या कॉलबैक फ़ंक्शंस को चलाने के लिए एकदम सही है.

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

3. सादा

यदि आप एक बहुत ही सरल स्क्रिप्ट चाहते हैं तो मैं अत्यधिक अनुशंसा करता हूं plainModal. यह है jQuery पर बनाया गया, पर ये उपलब्ध सबसे छोटी मोडल लिपियों में से एक.

ऐसा होता है किसी भी बाहरी सीएसएस या छवि फ़ाइलों का उपयोग न करें. बस एक सिंगल जेएस स्क्रिप्ट आपको सभी की जरूरत है.

एक बार जब सादी मेमोदाल स्क्रिप्ट आपके पेज में जुड़ जाती है, तो आप बस मोडल बटन को लक्षित करें और तुम जाने के लिए अच्छा हो यह आपको प्रदर्शन पर नियंत्रण करता है और आप मॉडल इंटरफ़ेस को कितना बदलना चाहते हैं.

इसके अलावा, आप कर सकते हैं जावास्क्रिप्ट की एक पंक्ति के साथ मोडल सेट करें इस प्लगइन के न्यूनतम विषय के साथ रखते हुए.

4. मोदक

कोई इनकार नहीं कर रहा है वेब पर पहुंच बहुत बड़ी है. हर डिजाइनर का लक्ष्य होना चाहिए अधिक समावेशी अनुभव विभिन्न उपकरणों और संभव सीमाओं के साथ दुनिया भर के लोगों के लिए.

साथ में Modaal, आपको वह सही अनुभव मिलता है जो WCAG 2.0 परीक्षण को ठोस AA पहुंच-योग्यता रेटिंग के साथ पास करता है. आप कुछ कोड प्रलेखन के साथ मुख्य पृष्ठ पर एक शानदार उदाहरण देख सकते हैं.

कुल मिलाकर, मैं इस वेनिला जावास्क्रिप्ट प्लगइन की सलाह देता हूं किसी के लिए जो वास्तव में पहुंच की परवाह करता है. कुछ वेब परियोजनाओं पर AA रेटिंग की आवश्यकता हो सकती है, इसलिए बुकमार्क रखने के लिए मोडल एक बहुत ही आसान स्क्रिप्ट है.

5. स्कॉच जेएस मोडल

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

मोडल को केन व्हीलर और इस लिपि द्वारा भी विकसित किया गया था एक पूर्ण ट्यूटोरियल है यदि आप सीखना चाहते हैं कि यह कैसे काम करता है। हालांकि, फ्री कोड अधिकांश डेवलपर्स के लिए पर्याप्त होना चाहिए क्योंकि यह है सुपर हल्के और स्थापित करने के लिए आसान है. कोई निर्भरता, और यहां तक ​​कि CodePen पर एक नमूना डेमो.

6. Bootbox.js

सबसे तेज तरीका है एक नई वेब परियोजना शुरू बूटस्ट्रैप के माध्यम से है। यह एक शक्तिशाली फ्रंटएंड फ्रेमवर्क है जो डेवलपर्स को प्रोत्साहित करता है लायब्रेरी में अपने स्वयं के ऐड-ऑन बनाएँ.

ऐसा ही एक उदाहरण है Bootbox.js, एक छोटा सा जावास्क्रिप्ट पुस्तकालय, पूरी तरह से बूटस्ट्रैप में मोडल खिड़कियों के लिए डिज़ाइन किया गया है. यह वास्तव में डायलॉग बॉक्स पर काम करता है जहां उपयोगकर्ता आपके अनुरोध के आधार पर ठीक क्लिक कर सकता है या रद्द कर सकता है.

विशिष्ट जावास्क्रिप्ट संवाद भयानक हैं, जैसे अलर्ट बॉक्स। बूटबॉक्स स्क्रिप्ट एक प्रदान करता है BS3 / BS4 पारिस्थितिकी तंत्र में काम करने वाले किसी भी व्यक्ति के लिए ठोस विकल्प.

फिर से, यह है पूरी तरह से मुक्त और खुला स्रोत, साथ में ए लंबा प्रलेखन पृष्ठ तुम्हें पाने के लिए और तेजी से चल रहा है.

7. iziModal.js

अगर तुम एक समाधान की जरूरत है थोड़ा और अधिक अनुकूलित चेक आउट iziModal.js. यह उपकरण है पूरी तरह से उत्तरदायी और के लिए बनाया गया है पूरी तरह से सभी आधुनिक ब्राउज़रों में काम करते हैं.

मुझे अभी तक एक और मोडल स्क्रिप्ट नहीं मिल पाई है, जो इस तरह के सौंदर्यवादी मनभावन डिजाइन प्रदान करती हो। यह गेट के साथ बाहर आता है भव्य यूआई जो व्यावहारिक रूप से किसी भी वेबसाइट में मिश्रण कर सकता है. हालाँकि, आप कर सकते हैं भी डिजाइन restyle अपनी आवश्यकताओं के अनुरूप.

बस इस प्लगइन पर ध्यान दें jQuery पर चलता है, तो यह यहाँ कुछ में से एक है एक निर्भरता है. लेकिन, अगर आप iziModal स्टाइल चाहते हैं तो इस तरह की स्लीक पॉपओवर विंडो के लिए भुगतान करना एक छोटी सी कीमत है.

8. jQuery मोडल

jQuery मोडल प्लगइन शायद है jQuery पर सबसे सरल मोडल स्क्रिप्ट जो आपको कभी भी मिलेगी.

इसे प्रोग्राम किया जा सकता है स्वचालित रूप से कुछ HTML तत्वों के साथ बाँधते हैं विभिन्न विशेषताओं के आधार पर। यह भी कीबोर्ड शॉर्टकट का समर्थन करता है जैसे खिड़की बंद करने के लिए ईएससी.

कुल मिलाकर, यह प्लगइन 1KB से कम के उपाय और यह हर संभव ब्राउज़र में काम करता है जिसकी आप कल्पना कर सकते हैं. jQuery के डेवलपर्स को अतिरिक्त तामझाम के बिना सरल मोडल स्क्रिप्ट तक त्वरित पहुंच के लिए इस प्लगइन को सहेज कर रखना चाहिए.

9. पिकोमॉडल

वेनिला जावास्क्रिप्ट की ओर वापस जाना, हमारे पास है PicoModal पुस्तकालय. यह संभवत: सबसे छोटी लिपियों में से एक है जिसे आप पाएंगे और इसे डिज़ाइन किया गया है वेनिला जावास्क्रिप्ट रीढ़ पर पूरी तरह से चलाएं.

यह सभी आधुनिक ब्राउज़रों का समर्थन करता है, iOS के लिए Android और Mobile Safari के लिए मोबाइल ब्राउज़र शामिल हैं। यह भी पुराने IE ब्राउज़रों का समर्थन करता है, IE7 में वापस डेटिंग करता है!

PicoModal के डेवलपर एक छोटी सी JSfiddle स्क्रिप्ट बनाई यह प्रदर्शित करने के लिए कि यह कैसे काम करता है। यह बहुत छोटा उदाहरण है और यह है एक क्लिक घटना या कुछ और से बंधा नहीं, लेकिन यह मुश्किल नहीं है कुछ टॉगल बटन में स्क्रिप्ट इस मोडल विंडो को ठीक से चलाने के लिए.

10. अवतार

Avgrund संभवत: इस सूची में सबसे अनोखे तरीकों में से एक है। यह एक का उपयोग करता है कस्टम पेज लुप्त होती प्रभाव, एक सिकुड़ एनीमेशन के साथ मॉडल को देखने में सही लाने के लिए.

हर कोई इस एनीमेशन की सराहना नहीं करेगा, इसलिए मैं यह नहीं कह सकता कि यह स्क्रिप्ट हर वेबसाइट पर फिट होगी। लेकिन, यह एक है शुद्ध वेनिला मोडल और इसे स्थापित करना बहुत आसान है, सिर्फ एक सीएसएस और एक जावास्क्रिप्ट फिल्म के साथई.

देख लेना डेमो पेज देखना है कि यह कैसे चलता है। यह निश्चित रूप से एक अनूठी शैली है और है ध्यान खींचने के लिए बाध्य कस्टम एनिमेशन के साथ जो बस काम करते हैं.

अंतिम शब्द

कोई फर्क नहीं पड़ता कि तुम क्या देख रहे हो, मैं शर्त लगा सकता हूँ कि इस सूची में कुछ आपकी आवश्यकताओं के अनुरूप है। लेकिन, अगर आप अभी भी संतुष्ट नहीं हैं संबंधित मोडल स्क्रिप्ट के लिए GitHub के माध्यम से ब्राउज़ करें और देखो कि तुम और क्या पा सकते हो.