Question

我已经查看了其他问题并且没有运气试图将其他答案集成到我自己的代码中。

此时，鼠标悬停时会出现向下滑动，当您点击图像时会出现弹出窗口。我只需要在查看此弹出窗口时淡出背景。

我创建了一个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

Answer 1

问题中发布了很多代码（在演示中甚至更多）似乎与被问到的问题没有任何关系。这或多或少只需要一个简单的叠加层;

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 ready事件或放置在<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/

Answer 2

模糊可以这样做：

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

现在你只需要jQuery在显示弹出窗口时切换模糊。

当弹出窗口可见时，创建css和jquery淡入淡出/模糊背景

2 个答案:

CSS

HTML

的JavaScript