jQuery的 - 暗淡整个页面和淡入淡出一个div元素

Question

我试着做到以下几点： - 点击一个链接触发，将.show调光了我的整个背景DIV（＃分页盖）的功能。这div有999 的z-index - 然后我想另一个DIV（#red）以较高的z-index

我的CSS在暗淡的背景/ 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; 
} 

像预想的那样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); 
    }); 
} 

页盖渐强，但是我没有之后再没有任何成功让#red出现。

有什么建议？

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

这是一个稍微不同的方式，但我认为这是你以后。当页面加载时，我们将一个点击事件绑定到<a>标签，而不是内联JS。我已经更新了CSS，以便RED div被隐藏，并且绝对定位 - 覆盖之上。您可能需要调整屏幕尺寸并将其放置在居中之前，让我知道这是否是您的意图，我会更新答案。