बैनर पर अपना ध्यान केंद्रित करने के लिए अपने वेबपृष्ठ को कैसे मंद करें? (अपने वेबपेज पर मंद-उज्ज्वल प्रभाव)

Question

मैं कैसे इस आशय कुछ वेबपेजों में बन जाता है पर सोच रहा था:

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

ठीक है, यह सिर्फ एक उदाहरण था, मुझे पता है कि विज्ञापनों को प्रदर्शित करने के इस तरह के अभ्यास अजीब हैं।

और मेरा प्रश्न यहां है - आप अपने वेबपृष्ठ पर मंद और उज्ज्वल प्रभाव कैसे प्राप्त करते हैं?

पुनश्च:

1. मैं सीएसएस में z- सूचकांक के बारे में पता है, तो मैं बस मद्धिम हिस्सा पता करने की जरूरत।
2. यदि यह संभव हो तो मैं एक सीएसएस आधारित समाधान (या किसी भी स्क्रिप्टिंग के बिना समाधान को हल कर रहा हूं) की तलाश में हूं।

धन्यवाद दोस्तों।

Answer 1

कुछ this जैसे कुछ? बहुत कम स्क्रिप्टिंग।

एचटीएमएल

<div class="overlay"></div> 
<div class="overlay-message"> 
    <p>CLICK TO CLOSE</p> 
</div> 

jQuery

$(document).ready(function() { 
    $(".overlay, .overlay-message").show(); 

    $(".overlay-message").click(function() { 
     $(".overlay, .overlay-message").hide(); 
    }); 
}); 

सीएसएस

.overlay { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background-color:#fff; 
    opacity:0.8; 
    z-index:1001; 
} 
.overlay-message{ 
    position: fixed; 
    top:30px; 
    left:30px; 
    width:400px; 
    height:250px; 
    background-color:#fff; 
    opacity:1; 
    z-index:1002; 
} 

Answer 2

आप इस का उपयोग कर सकते हैं: लक्ष्य चयनकर्ता सीएसएस और अस्पष्टता में, लेकिन दोनों अधिकांश ब्राउज़रों में उपलब्ध नहीं हैं।

इसके बजाय, आपको मंद बॉक्स दिखाई देने के लिए जावास्क्रिप्ट का उपयोग करना होगा।

आमतौर पर आप एक पारदर्शी पीएनजी फॉलबैक के साथ आरजीबीए पृष्ठभूमि रंग के साथ एक पूरी तरह से स्थित 100% चौड़ाई और ऊंचाई बॉक्स का उपयोग करेंगे।

इस तरह यह स्टाइलिंग काम करेगा:

#dim { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 

    background: url('semitransparent1x1.png'); 
    background: rgba(0, 0, 0, 0.8); 

    z-index:100; 
} 

तो यह दिखाने के लिए और इसे हटाने के लिए कुछ सरल jQuery का उपयोग करें।