Jquery - 暗淡整个页面并淡入一个div元素

Question

我正在尝试实现以下内容： - 点击链接触发一个函数，该函数将.show一个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);
    });
}

页面封面按照预期渐变，但我无法使#red在其后出现。

有什么建议吗？

- user1231561

---

你找到任何解决方案了吗？ - anam

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

这是一种略微不同的方法，但我认为这正是你想要的。我们不是使用内联JS，而是在页面加载时将点击事件绑定到<a>标签上。我已更新CSS以隐藏红色div，并将其绝对定位在覆盖层上方。您可能需要在淡入之前拉取屏幕尺寸并将其居中对齐，如果这是您的意图，请让我知道，我将更新答案。

- Aaron

---

嗨，亚伦，非常感谢您抽出时间查看我的问题，我很快就会尝试您的示例。然而这里有一个重要的注意事项 - 我的 #red div 需要始终可见。我基本上想要实现的是一种突出显示的功能，所以想象一下我有4个元素。其中一个被点击 > 整个页面变暗 > 被点击的对象淡入并成为唯一可见的非变暗对象。 - user1231561

你的 #red 是否为相对定位？ - Aaron

我已经更新了答案，但是还需要另一个部分。当关闭覆盖层并返回您的网站时 - 您需要将#red定位重置为相对位置。另一种选择是使用.clone()并将其放入覆盖元素中，然后在关闭覆盖时将其删除。 - Aaron

$('#red').css({'position':'absolute','z-index':9999}); 注意JS部分答案中的错别字。（"aboslute" 应为 "absolute"） - Simon Shirley