javascript - Jquery - 使整个页面变暗并淡出一个 div 元素

Question

我正在尝试执行以下操作: - 单击链接会触发一个功能，该功能将显示一个 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>

查询

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 出现在后面。

有什么建议吗？

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

这是一种略有不同的方法，但我认为这就是您所追求的。我们将点击事件绑定(bind)到 <a>，而不是内联 JS页面加载时标记。我已经更新了 CSS，以便隐藏红色 div，并且绝对定位在叠加层之上。您可能需要在淡入之前拉出屏幕尺寸并将其居中放置，如果这是您的意图，请告诉我，我会更新答案。