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

Question

का उपयोग कर यह मेरा पृष्ठ URL

http://sample.com/mytest.php

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

.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 2000%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 

लेकिन एक परीक्षण पृष्ठ में नीचे दी गई कोड पूरी पृष्ठभूमि को कवर करने के लिए उपयोग की जाती है। यह बढ़िया काम करता है।

<style type="text/css"> 
    /*give the body height:100% so that its child 
    elements can have percentage heights*/ 
    body{ height:100% } 
    /*this is what we want the div to look like*/ 
    div.fullscreen{ 
    display:block; 
    /*set the div in the top-left corner of the screen*/ 
    position:absolute; 
    top:0; 
    left:0; 
    background-color: black; 
    /*set the width and height to 100% of the screen*/ 
    width:100%; 
    height:100%; 
    color: white; 
    } 
</style> 

<div class="fullscreen"> 
    <p>Here is my div content!!</p> 
</div> 

मैं अपने लॉगिन पेज पृष्ठभूमि के लिए ऐसा कैसे कर सकता हूं, मुझे नहीं पता। कोई भी इस समस्या को हल करने में मेरी मदद कर सकता है।

Answer 1

div.fullscreen{ 
    position:fixed 
    ... 
} 

पूर्ण कोशिश: तत्व अपनी पहली स्थिति में (स्थिर नहीं) पूर्वज तत्व
तय को स्थिति में है: तत्व ब्राउज़र विंडो

Answer 2

को किस स्थिति में है आपको अपने पॉपअप और पृष्ठभूमि को किसी भी अन्य ब्लॉक तत्वों के बाहर ले जाने की आवश्यकता है, शायद </body> से पहले। पृष्ठभूमि 100% कंटेनर भरने के लिए फैली हुई है जो शरीर की बजाय टेबल सेल है। इसका मतलब है कि आपको स्थिति (बाएं और दाएं) को बदलना होगा।

Answer 3

आप बॉडी टैग के अंत से पहले या शरीर टैग के शुरू करने के बाद नीचे दिए गए कोड डालने के लिए है

<div class="black_overlay" id="fade" style="display: block;"></div> 

Answer 4

समस्या यह है कि div.black_overlay, तालिका के अंदर है, इसलिए आप उपयोग नहीं कर सकते है widht:100% और height:100% । तालिका के बाहर बस div.black_overlay स्थानांतरित करें और z-index: 1; जोड़ें। मैंने फायरबग का उपयोग करके परीक्षण किया है और यह काम करता है!