Div Overlay ENTIRE पेज बनाएं (सिर्फ व्यूपोर्ट नहीं)?

93

इसलिए मुझे एक समस्या है जो मुझे लगता है कि काफी सामान्य है लेकिन मुझे अभी तक इसके लिए एक अच्छा समाधान नहीं मिला है। मैं एक ओवरले कवर को ENTIRE पेज बनाना चाहता हूं ... सिर्फ व्यूपोर्ट नहीं। मुझे समझ नहीं आ रहा है कि ऐसा करना इतना कठिन क्यों है ... मैंने बॉडी सेट करने की कोशिश की है, html 100% इत्यादि। लेकिन वह काम नहीं कर रहा है। यह है, जो कि अभी तक मेरे पास है:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

अगर कोई मौजूद है, तो मैं भी जावास्क्रिप्ट में एक समाधान के लिए खुला रहूंगा, लेकिन मैं कुछ सरल सीएसएस का उपयोग करूंगा।

html css

— Polaris878
स्रोत

यहाँ भी पढ़ सकते हैं: stackoverflow.com/questions/1938536/…

— मार्को डेमायो

यह jQuery के साथ असली के लिए किया जा सकता है?

— विलियम एंट्रीकेन

224

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

उदाहरण: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

— सैम्पसन
स्रोत

3

मैं गलत हो सकता है, लेकिन IE6 में निश्चित काम की स्थिति होगी ?! मुझे पता है कि शायद अब IE6 के बारे में कोई परवाह नहीं करता है।

— मार्को डेमायो

29

@ मर्को यकीन नहीं है। ईमानदार होने के लिए, यदि 10 साल के एक ब्राउज़र के लिए समर्थन स्पष्ट रूप से अनुरोध नहीं किया गया है, तो मैं अब और परेशान नहीं करने वाला हूं :)

— सैम्पसन

5

तो आप लोग मोबाइल डिवाइस पर कैसे करते हैं? bradfrostweb.com/blog/mobile/fixed-position

— बोरिसऑकुंस्की

3

+1 धन्यवाद! मैंने ओवरले के ऊपर एक पॉपअप विंडो जोड़कर आपका उदाहरण दिया: jsbin.com/okabo3/740

— kol

इस समस्या के साथ मैं (जो एक प्लग में कई द्वारा प्रयोग किया जाता है) है जब आप <select>iOS में किसी तत्व को क्लिक करते हैं तो यह संपूर्ण व्यूपोर्ट को स्थानांतरित कर देता है और मूल रूप से सब कुछ तोड़ देता है। निश्चित तत्व चलते हैं, जिन चीजों को स्क्रॉल नहीं करना चाहिए, आदि

— billynoah

15

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

— नैट बर्र
स्रोत

2

वहाँ सबसे अच्छा संभव समाधान। आप सिर्फ शरीर के लिए "ओवरलेड" वर्ग को टॉगल करते हैं और उस वर्गनाम के साथ शरीर के ऊपर स्टाइल लागू करते हैं।

— सिवातोस्लाव ज़ालिशचुक

3

कृपया इस उत्तर को और स्पष्ट करें। मुझे Sviatoslav की टिप्पणी समझ में नहीं आती है।

— लोनी बेस्ट

1

सबसे पहले, मुझे लगता है कि आपने गलत समझा है कि व्यूपोर्ट क्या है। व्यूपोर्ट वह क्षेत्र है जिसे ब्राउज़र वेब पृष्ठों को रेंडर करने के लिए उपयोग करता है, और आप किसी भी तरह से इस क्षेत्र को ओवरराइड करने के लिए किसी भी तरह से अपनी वेब साइटों का निर्माण नहीं कर सकते हैं।

दूसरे, ऐसा लगता है कि यह कारण है कि आपका ओवरले-डिव पूरे व्यूपोर्ट को कवर नहीं करेगा क्योंकि आपको बॉडी और एचटीएमएल पर सभी मार्जिन को हटाना होगा।

इसे अपनी स्टाइलशीट के शीर्ष पर जोड़ने का प्रयास करें - यह सभी तत्वों पर सभी मार्जिन और पैडिंग को रीसेट करता है। आगे के विकास को आसान बनाता है:

* { margin: 0; padding: 0; }

संपादित करें: मैंने अभी-अभी आपके प्रश्न को बेहतर समझा है। Position: fixed; शायद तुम्हारे लिए बाहर काम करेंगे, जैसा कि जोनाथन सैम्पसन ने लिखा है।

— अरव सिस्टड
स्रोत

1

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

— सैम्पसन १

1

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

— अरिव सिस्टड

3

@ फिर भी यह आपको बंद कर देता है, लेकिन इसके बजाय समय-परीक्षणित रीसेट शीट का उपयोग करना बेहतर है। की जाँच करें meyerweb.com/eric/tools/css/reset अधिक जानकारी के लिए - आप इसे पसंद करेंगे, मैं आपको विश्वास दिलाता :)

— सैम्पसन

मैंने इसे देखा है, और मुझे लगता है कि यह बहुत बड़ा है :)

— Arve Systad

1

@ फिर से रीसेट करें वह बड़ा नहीं है - पूरी तरह से ठीक होने की कोशिश करें *{}और आप बहुत अधिक देखेंगे :)

— सैम्पसन

0

मैं काफी परेशान था क्योंकि मैं ओवरले को ठीक नहीं करना चाहता था क्योंकि मैं चाहता था कि ओवरले के अंदर की जानकारी पाठ के ऊपर स्क्रॉल करने योग्य हो। मैंनें इस्तेमाल किया:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

बेशक बीच में div कुछ सामग्री और शायद एक पारदर्शी ग्रे पृष्ठभूमि की जरूरत है, लेकिन मुझे यकीन है कि आप जिस्ट मिल रहे हैं!

— बेंजामिन वॉन
स्रोत

-6

मैंने ऊपर नैट बर्र के उत्तर को देखा, जो आपको अच्छा लग रहा था। यह सरल से बहुत अलग नहीं लगता है

html {background-color: grey}

— जस्टिन मुंसे
स्रोत