Jquery - assombrir une page entière et faire fondre un élément div

Question

En essayant de faire ce qui suit: - un lien est cliqué déclenchant une fonction qui affichera une DIV (# couverture de page) qui obscurcira tout mon arrière-plan. Ce div a un z-index de 999 - Je veux une autre div (#red) apparaisse sur l'arrière-plan estompé/fadeup/spectacle avec un z-index supérieur

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

la page couverture se fane comme supposé, mais je n'ai pas J'ai eu du succès à faire apparaître #red après.

Des suggestions?

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

Ceci est une approche légèrement différente, mais je pense que c'est ce que vous êtes après. Au lieu de JS en ligne, nous lions un événement click à la balise <a> lors du chargement de la page. J'ai mis à jour le CSS de sorte que la div RED est cachée, et positionnée absolument - au-dessus de la superposition. Vous devrez peut-être tirer les dimensions de l'écran et le positionner au centre juste avant de le faire disparaître. Faites-moi savoir si c'est votre intention et je mettrai à jour la réponse.