我正在尝试执行以下操作:
- 单击链接会触发一个功能,该功能将显示一个 DIV (#page-cover),使整个背景变暗。该 div 的 z 索引为 999
- 然后我想要另一个 div (#red) 出现在暗淡的背景/淡出/显示上,并具有更高的 z-index
My 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 之后出现。
有什么建议么?
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>
页面加载时的标记。我已经更新了 CSS,以便 RED div 被隐藏,并绝对定位在覆盖层上方。您可能需要拉动屏幕尺寸并将其定位在淡入之前居中,请告诉我这是否是您的意图,我将更新答案。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)