Jquery - przyciemnij całą stronę i zaniknij jeden element div

Question

Próbuję wykonać następujące czynności: - kliknięcie łącza uruchamia funkcję, która wyświetli DIV (# page-cover) przyciemniającą całe moje tło. Ten div ma z-index 999 - Potem chcę innego div (#red) do stawienia się na przyciemnionym tle/fadeup/show z wyższą z-index

Moje CSS:

#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 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); 
    }); 
} 

strona-cover przebarwia się jak powinien, jednak ja nie mam t odniosło sukces, powodując, że #red pojawi się później.

Wszelkie sugestie?

Answer 1

CSS

#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> 

JS

$(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(); 
    }); 
}); 

Jest to nieco inne podejście, ale myślę, że to Ty jesteś po. Zamiast wbudowanego JS wiążemy zdarzenie click do tagu <a> po załadowaniu strony. Zaktualizowałem CSS, aby div CZERWONY był ukryty i umieszczony absolutnie - nad nakładką. Być może będziesz musiał przeciągnąć wymiary ekranu i ustawić je na środku tuż przed zanikiem, daj mi znać, jeśli to jest twoje intencje, a ja zaktualizuję odpowiedź.