IE में लाइटबॉक्स पृष्ठभूमि की समस्याएं

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

लाइटबॉक्स बनाता है

अधिकांश लाइटबॉक्स लाइटबॉक्स प्रभाव के लिए जावास्क्रिप्ट के कुछ रूप का उपयोग करते हैं। उदाहरण के लिए, थिकबॉक्स, jQuery के उपयोग के माध्यम से जावास्क्रिप्ट पर बहुत अधिक निर्भर करता है। इसके विपरीत, वेबसाइट "थिंक विटामिन" में केवल सीएसएस और एक्सएचटीएमएल का उपयोग करके डिज़ाइन किया गया एक लाइटबॉक्स है। अलेक्जेंडर डावसन का सेमेटिक सीएसएस 3 लाइटबॉक्स भी IE- संगत है। डॉसन ने IE के किसी भी संस्करण का आईई 9 की तुलना में पता लगाने के लिए कुछ जावास्क्रिप्ट को कोड में जोड़ा; जब IE के एक संस्करण का पता लगाया जाता है, तो यह सीएसएस की जगह एक पारदर्शी पीएनजी छवि का उपयोग करता है जो आमतौर पर पारदर्शी पृष्ठभूमि के लिए उपयोग किया जाता है। आप जैक मूर द्वारा ColorBox की कोशिश भी कर सकते हैं, जो IE 6 में 9 के माध्यम से भी काम करता है।

लाइटबॉक्स और IE में बैकग्राउंड ओपेसिटी

इंटरनेट एक्सप्लोरर संस्करण 8 और पहले के प्रकाशन के अनुसार, वर्तमान सीएसएस मानकों के अनुरूप नहीं हैं। अनुपालन की कमी लाइटबॉक्स के लिए एक समस्या पैदा करती है, विशेष रूप से लाइटबॉक्स पृष्ठभूमि, क्योंकि सीएसएस एक तरह से अपारदर्शिता बनाता है जो हर दूसरे वेब ब्राउज़र में प्रदर्शित होता है। CSS3 से पहले, वेब डिजाइनरों ने स्टाइल शीट में "अस्पष्टता" विशेषता टैग या वर्ग का उपयोग करके एक तत्व को अर्ध-पारदर्शी बनाया, जैसे:

। बैकग्राउंड {बैकग्राउंड: # 000000; ऊंचाई: 100% चौड़ाई: 100%; अपारदर्शिता: 0.5;}

उपरोक्त एक काली पृष्ठभूमि बनाता है जो 50 प्रतिशत पारदर्शी है और पृष्ठ को भरता है।

IE के साथ काम करने के लिए संशोधन की क्षमता

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

। बैकग्राउंड {बैकग्राउंड: # 000000; ऊंचाई: 100% चौड़ाई: 100%; अपारदर्शिता: 0.5; फ़िल्टर: अल्फा (अपारदर्शिता = 50) ;;

यह फिक्स इंटरनेट एक्सप्लोरर 6 और इसके साथ काम करता है, और अन्य ब्राउज़रों में प्रदर्शन समस्याओं का कारण नहीं बनता है।

CSS3

जैसे ही CSS3 अधिक व्यापक रूप से समर्थित हो जाता है, अधिक lightbox इसकी उन्नत डिज़ाइन सुविधाओं का लाभ उठाता है। CSS3 आपको आरजीबी मूल्यों में रंग को परिभाषित करके एक तत्व में एक ही रंग को पारदर्शी बनाने की अनुमति देता है, साथ ही एक अतिरिक्त "अल्फा" सेटिंग, जहां अपारदर्शिता को 0 और 1 के बीच परिभाषित किया गया है। उदाहरण के लिए, 50 प्रतिशत पारदर्शी दिखने वाली एक नीली पृष्ठभूमि इस तरह:

पृष्ठभूमि: आरजीबीए (0, 0, 255, 0.5);

Internet Explorer 8 और पुराने संस्करण इस फ़ंक्शन का समर्थन नहीं करते हैं, इस प्रकार कोई भी लाइटबॉक्स पृष्ठभूमि जो इस फ़ंक्शन को पूरी तरह से पारदर्शी के रूप में प्रदर्शित करता है।