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

Posted 2023-03-06

【中文标题】Jquery - 使整个页面变暗并淡出一个 div 元素

【英文标题】：Jquery - dim entire page and fade up one div element

【发布时间】：2013-02-01 13:18:47

【问题描述】：

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

有什么建议吗？

【问题讨论】：

你找到解决办法了吗？

【参考方案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，并绝对定位 - 在覆盖层之上。您可能需要在淡入之前拉出屏幕尺寸并将其居中放置，如果这是您的意图，请告诉我，我会更新答案。

【讨论】：

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

你的#red是相对定位的吗？

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

$('#red').css('position':'absolute','z-index':9999); 请注意答案中 JS 部分的错字。 （“绝对”应该是“绝对”）