javascript Jquery - 使整个页面变暗并淡出一个 div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14913788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - dim entire page and fade up one div element
提问by user1231561
Im trying to do the following: - a Link is clicked triggering a function that will .show a DIV (#page-cover) dimming down my entire background. This div has a z-index of 999 - Then I want another div (#red) to appear upon the dimmed background / fadeup/show with a higher z-index
我正在尝试执行以下操作： - 单击链接会触发一个函数，该函数将 .show 一个 DIV（#page-cover）使我的整个背景变暗。这个 div 的 z-index 为 999 - 然后我希望另一个 div (#red) 出现在带有更高 z-index 的变暗背景/淡入淡出/显示上
My CSS:
我的 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
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 fades up as supposed, however i've not had any success making #red appear afterwards.
页面封面按预期淡出，但是我没有成功让#red 出现之后。
Any suggestions?
有什么建议？
回答by Aaron
CSS
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:
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
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();
});
});
This is a slightly different approach, but I think it's what you're after. Instead of inline JS, we're binding a click event to the <a>tag when the page loads. I've updated the CSS so that the RED div is hidden, and positioned absolutely - above the overlay. You may need to pull screen dimensions and position it centered right before fading it in, let me know if this is your intent and I'll update the answer.
这是一种略有不同的方法，但我认为这就是您所追求的。我们在<a>页面加载时将点击事件绑定到标签，而不是内联 JS 。我已经更新了 CSS，以便隐藏 RED div，并绝对定位在覆盖层上方。您可能需要在淡入之前拉出屏幕尺寸并将其居中放置，如果这是您的意图，请告诉我，我会更新答案。
