当弹出窗口可见时，创建一个CSS和jQuery淡入/模糊背景

Question

当弹出窗口可见时，创建一个CSS和jQuery淡入/模糊背景

jqueryhtmlcsspopupfade

6

我查看了其他问题，尝试将其他答案集成到我的代码中，但没有成功。

现在，当鼠标悬停时，会出现下拉菜单，在单击图像时，弹出菜单出现。当此弹出菜单出现时，我只需要淡化背景即可。

我创建了一个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());
});

这是我的代码片段

有什么想法吗？

代码片段

- Nicola Conee

2个回答

0

可以这样进行模糊处理：

.body {
    -webkit-filter: blur(10px);     
    filter: blur(10px);  
}

现在你只需要使用jQuery来在弹出窗口显示时切换模糊效果。

- ykadaru

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xec · Accepted Answer

这个问题中发布了很多代码（在演示中甚至更多），似乎与所问的问题没有任何关系。这是一个简单覆盖层所需要的全部内容；

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

请确保此元素是的子元素（直接后代），或者不存在定位的祖先元素。（“定位”指的是具有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/17/

这里有一个包含弹出层效果的演示：http://jsfiddle.net/5aWhE/19/