Jquery - gesamte Seite dimmen und ein div-Element einblenden

Question

Ich versuche, folgendes zu tun: - Ein Link wird angeklickt, der eine Funktion auslöst, die ein DIV (# page-cover) anzeigt, das meinen gesamten Hintergrund abdunkelt. Dieses div hat einen Z-Index von 999 - Dann will ich ein anderes div (#red) mit einem höheren Z-Index auf die gedimmten Hintergrund/fadeup/show erscheint

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

Seitenabdeckung verblasst wie angenommen, aber ich habe keine Es war ein Erfolg, der #red später erscheinen ließ.

Irgendwelche Vorschläge?

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

Dies ist ein etwas anderer Ansatz, aber ich denke, es ist das, was Sie nach. Anstelle von Inline-JS binden wir ein Klickereignis an das Tag <a>, wenn die Seite geladen wird. Ich habe das CSS aktualisiert, so dass das RED div versteckt und absolut positioniert ist - über dem Overlay. Sie müssen möglicherweise Bildschirmabmessungen ziehen und zentrieren, bevor sie eingeblendet werden, lassen Sie mich wissen, wenn dies Ihre Absicht ist, und ich werde die Antwort aktualisieren.