我查看了其他问题，但没有成功地尝试将其他答案集成到我自己的代码中。
目前，当鼠标悬停时会出现向下滑动，当您单击图像时会出现弹出窗口。我只需要在看到此弹出窗口时淡出背景即可。
我创建了一个 jsfiddle 来尝试演示我的代码当前的样子。
我试图在弹出窗口可见时在整个页面上创建淡入淡出/变暗效果，然后在弹出窗口关闭时消失。
我已经创建了叠加层作为显示在弹出窗口后面的样式，但仍然没有成功。
我曾尝试将多个类附加到该函数，但它破坏了代码并且没有弹出窗口出现。
这是我的 .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());
});
这是我的 fiddle
有什么想法吗？
最佳答案
问题中有很多代码(在演示中甚至更多)似乎与所问的问题没有任何关系。这或多或少是一个简单叠加层所需要的；
CSS
.overlay {
position:fixed;
display:none;
/* color with alpha channel */
background-color: rgba(0, 0, 0, 0.7); /* 0.7 = 70% opacity */
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
html
确保这是 <body> 的子代(直系后代) ，或者没有定位的祖先。 (术语“定位”是指具有 position 值而不是 static 的元素)
<div class="overlay"></div>
javascript
放置在 dom 就绪事件中或放置在 <body> 的末尾
// rather than "body", you will want to tweak this selector
$("body").click(function() {
$(".overlay").toggle(); // show/hide the overlay
});
这是一个演示，包括带有叠加层的弹出窗口:http://jsfiddle.net/5aWhE/19/
关于jquery - 当弹出窗口可见时创建 css 和 jquery 淡入淡出/模糊背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17363922/