Jquery - पूरे पृष्ठ को मंद करें और एक div तत्व को फीका करें

Question

मैं निम्नलिखित करने का प्रयास कर रहा हूं: - एक लिंक को एक फ़ंक्शन ट्रिगर करने पर क्लिक किया जाता है। एक डीवी (# पृष्ठ-कवर) मेरी पूरी पृष्ठभूमि को कम कर देता है। इस div 999 का z- इंडेक्स है - तो फिर मैं एक और div (#red) एक उच्च z- सूचकांक

मेरे सीएसएस के साथ मंद पृष्ठभूमि/fadeup/शो पर प्रदर्शित करना चाहते हैं:

#page-cover { 
    display: none; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    z-index: 999; 
    top: 0; 
    left: 0; 
} 
    #red { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
} 

एचटीएमएल

//Triggering link 
<a href="#" onclick="dimBackground("Element1")">Element 1</a> 
//Div to appear upon dimmed DIV 
<div id="red">hejsa</div> 
//Dimming DIV 
<div id="page-cover"></div> 

Jquery

function dimBackground() { 
    $("#page-cover").css("opacity",0.6).fadeIn(300, function() { 
     //Attempting to set/make #red appear upon the dimmed DIV 
     $('#red').css('zIndex', 10000); 
    }); 
} 

पेज-कवर के रूप में माना जाता अप fades, हालांकि मैं कोई है टी को बाद में दिखाई देने में कोई सफलता नहीं मिली।

कोई सुझाव?

Answer 1

सीएसएस

#page-cover { 
    display: none; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    z-index: 999; 
    top: 0; 
    left: 0; 
} 
    #red { 
    background-color: red; 
    width: 100px; 
    height: 100px; 
} 

HTML:

//Triggering link 
<a id="triggeringlink" href="#">Element 1</a> 
//Div to appear upon dimmed DIV 
<div id="red">hejsa</div> 
//Dimming DIV 
<div id="page-cover"></div> 

जे एस

$(window).load(function(e){ 
    $('#triggeringlink').on('click',function(e){ 
    $("#page-cover").css("opacity",0.6).fadeIn(300, function() {    
     $('#red').css({'position':'absolute','z-index':9999}); 
    }); 
    e.preventDefault(); 
    }); 
}); 

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