मोडल विंडो और डायलॉग को लागू करने के लिए कई jQuery प्लगइन्स हैं। उनमें से कई की कोशिश करने के बाद, मुझे एक भी ऐसा नहीं मिला, जो पर्याप्त सरल हो और, महत्वपूर्ण रूप से, सही ढंग से कार्य को हल कर सकता है।
SamDark ने हाल ही में
सही मोडल विंडो के बारे में लिखा है और समुदाय के लिए मोडल प्लगइन पेश किया है। मैं मोडल विंडो के उनके दृष्टिकोण से पूरी तरह सहमत हूं, लेकिन प्लगइन ने अभाव कार्यक्षमता को प्रस्तुत किया। मैं एक ही विषय पर लंबे समय से परियोजना से भटक रहा हूं, इसलिए मैंने उन्हें प्लग-इन के रूप में भी व्यवस्थित करने का निर्णय लिया।
मुख्य विशेषताएं
- एक साथ कई खिड़कियों का प्रदर्शन
- खिड़की को लंबवत और क्षैतिज रूप से केंद्रित करना
- प्रक्रिया विज़ुअलाइज़ेशन के साथ AJAX लोडिंग मोडल विंडो सामग्री
- पृष्ठ की मुख्य सामग्री के लिए स्क्रॉलबार छिपाएँ
- स्क्रीन को फिट नहीं करने पर विंडो को स्क्रॉल करने की क्षमता
- एस्केप दबाते समय विंडो को बंद करना या ओवरले पर क्लिक करना
प्लगइन का उपयोग करना
हम jQuery और jquery.arcticmodal प्लगइन शामिल करते हैं:
<script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script> <script src="js/arcticmodal/jquery.arcticmodal-0.1.min.js"></script> <link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.1.css">
HTML मार्कअप:
<div class="b-modal" id="exampleModal"> <div class="b-modal_close arcticmodal-close">X</div> </div>
जावास्क्रिप्ट:
$('#exampleModal').arcticmodal();
प्रलेखन, उदाहरण और यहाँ डाउनलोड करेंरचनात्मक आलोचना बहुत स्वागत है :)
यूपीडी गिटहब रिपोजिटरी