我查看了其他问题,尝试将其他答案集成到我的代码中,但没有成功。
现在,当鼠标悬停时,会出现下拉菜单,在单击图像时,弹出菜单出现。当此弹出菜单出现时,我只需要淡化背景即可。
我创建了一个jsfiddle来尝试演示我的当前代码。
我正在尝试在弹出菜单可见时在整个页面上创建淡入/变暗效果,当弹出菜单关闭时它将消失。
我已经创建了style为.overlay来显示在弹出菜单后面,但仍然没有成功。
我尝试将多个类附加到函数上,但它破坏了代码,并且没有弹出菜单出现。
这是我的.overlay css:
.overlay{
background-image: url(http://dummyimage.com/600x400/000/000);
position:absolute;
top:0;
left:0;
width:100%;
z-index:100;
display:none;
text-align:left;
}
.toggledDiv {
height: 0px;
overflow: hidden;
z-index:10;
width: 130px;
padding-left:5px;
padding-right:5px;
margin-left: 15px;
background-color:white;
box-shadow: 5px 5px 5px #333;
}
这是我从一个教程中学来的函数,用于实现此功能:
// blur background
$(".overlay").css("height", $(document).height());
$(".toggleLink").click(function(){
$(".overlay").fadeIn();
return false;
});
$(window).bind("resize", function(){
$(".overlay").css("height", $(window).height());
});
这是我的代码片段
有什么想法吗?
temp = $('body').html()
temp = '<div id="overlay">' + temp + '<div>'
$('body').html(temp)
然后使用jquery append将CSS插入页面头部 但这似乎不起作用。 - scottydelta$('body').html(anything)
听起来像是个可怕的想法,因为它会覆盖整个页面...你可能想要像这样使用$(document.body).prepend(yourHtml)
。使用.append()
动态地在<head>
中插入css<link>
也是完全可能的,尽管不需要,因为你可以直接使用.css()
将样式附加到元素上。如果你无法让它工作,请尝试发布一个新问题。 - xecwindow.body.scrollHeight
来获取覆盖层的高度,否则它只会出现在窗口的可见部分。 - scottydeltaposition: fixed;
而不是absolute
。 - xec