我正在尝试执行以下操作: - 单击链接会触发一个功能,该功能将显示一个 DIV(#page-cover)使我的整个背景变暗。这个 div 的 z-index 为 999 - 然后我希望另一个 div (#red) 出现在具有更高 z-index 的变暗背景/淡入淡出/显示上
我的 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);
});
}
page-cover 按预期消失,但是我没有成功让#red 出现。
有什么建议么?