2012-05-01 19 views
5

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

उत्तर

6

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

क्या कमीएं हैं? खैर आपके पास मोडल की चौड़ाई और स्थिति पर कोई नियंत्रण नहीं है, क्योंकि यह एक निश्चित कंटेनर के अंदर सीएसएस के साथ स्थित है, इसलिए आपको अपनी जरूरतों के अनुरूप इसे अनुकूलित करने के लिए सीएसएस को संशोधित करना होगा, जब आपको कई अलग-अलग आकार की आवश्यकता होती है तो यह बदसूरत हो सकता है आपके पृष्ठ में लोड करने के लिए मोडल। आप जेएस या सीएसएस में भारी संशोधन के उपयोग के बिना स्क्रीन पर मोडल को लंबवत/क्षैतिज रूप से केंद्रित नहीं कर सकते हैं। आप किसी भी अन्य मीडिया को आसानी से लोड नहीं कर सकते जैसे कि iframes/videos/images अभी तक हैक्स की आवश्यकता के बिना या नहीं। मैंने अतिरिक्त लाभ और प्रदर्शन बूट से पहले उल्लेख किया है कि बूटस्ट्रैप मोडल प्रभाव के लिए CSS3 संक्रमण का उपयोग करके लाता है, अच्छी तरह से यह एक डबल तलवार वाली तलवार है क्योंकि पुराने ब्राउज़र उन तरीकों का समर्थन नहीं करते हैं और इस प्रकार कोई प्रस्तुति प्रभाव नहीं पड़ता है। प्रभावों के बारे में बोलते हुए, अभी केवल एक ही है, जो एक स्लाइड-फीड प्रभाव है इसलिए वहां बहुत सारे विकल्प नहीं हैं (एक बड़ा सौदा नहीं, लेकिन सोचा कि मैंने इसे नोट किया है)।

मैं फैंक्सबॉक्स के साथ जाऊंगा, आपके हिरण के लिए अधिक धमाकेदार, बूटस्ट्रैप मोडल प्लगइन अभी भी युवाओं के लिए बहुत अधिक है और भविष्य में रिलीज में यह बाकी तक पहुंच जाएगा। fancybox के लिए

+0

धन्यवाद, अनुमान है कि यह सार –

5

सकारात्मक:

  • यह बॉक्स से बाहर अधिक मीडिया का समर्थन करता है। बूटस्ट्रैप के लिए

सकारात्मक:

वाणिज्यिक उपयोग के लिए
  • नि: शुल्क - अपाचे लाइसेंस 2.0 है, जबकि Fancybox 2.x सीसी BY-NC 3.0 लाइसेंस प्राप्त है।
  • हमारी अधिकांश परियोजनाओं में पहले से ही शामिल है।
  • हमें आवश्यकता के अनुसार संशोधित और विस्तार करने के लिए बहुत आसान है।
  • निरंतर और लगातार अद्यतन।
  • क्लीनर कोड। फैंक्सबॉक्स कोड खराब प्रथाओं से भरा है (ब्राउज़र एजेंट स्नीफिंग, अवमूल्यित jQuery कॉल, बग्गी पुराने आईई समर्थन का उपयोग करके)।
  • भारी भारोत्तोलन के लिए सीएसएस का भारी उपयोग करता है, जिससे इसे चिकना, छोटा और तेज बनाता है।
  • मोडल के पूरे स्वरूप को नियंत्रित करने के लिए बेहद आसान है क्योंकि यह सीएसएस द्वारा नियंत्रित है।

शायद बूटस्ट्रैप मई के बाद से काफी बदल गया है, हालांकि, के बाद से मैं 2012 के अगस्त के बाद से इसे का उपयोग किया गया है, मैं क्या एन्ड्रेस llich यह मुश्किल जा रहा है चौड़ाई/ऊंचाई/के केंद्रीकरण को नियंत्रित करने के बारे में कहा के सबसे कह सकते हैं मोडल या तो चला गया है, या अधिक संभावना है कि वह सीएसएस को बहुत अच्छी तरह से समझ में नहीं आता है।कंटेनर एक आपके द्वारा निर्दिष्ट, एक आईडी हो सकता है, और किसी भी सीएसएस आप चाहते करने के लिए "ओवरराइड" तो उचित वर्ग आईडी निर्दिष्ट करने के रूप में सरल, उदाहरण के लिए है:

#citymodal { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 80%; 
    margin-left: -167px; 
    width: 334px; 
    padding-bottom: 40px; 
    min-height: 150px; 
} 

हमारे शहर मोडल बना देता है कि 334px विस्तृत , और क्षैतिज केंद्रित। हम इसे आसानी से आसानी से केंद्र में केंद्रित कर सकते हैं, लेकिन यह विशेष बॉक्स ग्राहक की ऊंचाई पर उत्तरदायी (80%) है और हमेशा उनकी देखने की ऊंचाई से बड़ा होगा ("हमेशा" 8+ 30 से कम होने वाले सभी नमूनों के लिए "रेटिना मॉनीटर स्टैक्ड लंबवत या कम)

+0

मैं अपने कोड की कोशिश की और यह काम नहीं करते। क्या आप jsfiddle में एक उदाहरण बना सकते हैं? – Philip007

+0

यहां एक त्वरित jsfiddle है: http://jsfiddle.net/E5pjU/ मैंने बूटस्ट्रैप संस्करण 3 के लिए कुछ शैलियों को अद्यतन किया जो संस्करण 2 के लिए भी आवश्यक नहीं थे। –

1

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

http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

, आप शीर्षक और बटन सलाखों रखने के लिए नहीं है। आप इस lynda.com वीडियो में देखेंगे (subsc के लिए उपलब्ध ribers), उन्हें छोड़कर आप कुछ सुंदर पूर्ण स्क्रीन फोटो ज़ूम व्यवहार प्राप्त कर सकते हैं।

http://www.lynda.com/course20/Bootstrap-tutorials/Updating-modals/138156/144536-4.html

संबंधित मुद्दे