Jquery – 整个页面变暗并淡化一个div元素

我尝试执行以下操作： – 单击一个链接，触发一个function，显示DIV（＃page-cover）调暗我的整个背景。 这个div的z-index为999 – 然后我希望另一个div（#red）出现在具有更高z-index的灰色背景/ fadeup / show上

我的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 Element 1 //Div to appear upon dimmed DIV 
hejsa
 //Dimming 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 Element 1 //Div to appear upon dimmed DIV 
hejsa
 //Dimming 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(); }); }); 

这是一种略有不同的方法，但我认为这就是你所追求的。 我们在页面加载时将click事件绑定到标记，而不是内联JS。 我已经更新了CSS，以便隐藏RED div，并且绝对定位 – 覆盖层上方。 您可能需要拉动屏幕尺寸并将其放在中心位置，然后将其淡入，让我知道这是否是您的意图，我会更新答案。