6

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

目前，当鼠标悬停时会出现向下滑动，当您单击图像时会出现弹出窗口。当这个弹出窗口出现时，我只需要淡出背景。

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

这是我的小提琴

有任何想法吗？

小提琴

4

2 回答 2

18

问题中发布了很多代码（在演示中甚至更多），这些代码似乎与所提出的问题没有任何关系。这或多或少是简单叠加所需要的；

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/17/

这是一个演示，包括一个带有叠加层的弹出窗口：http: //jsfiddle.net/5aWhE/19/

于 2013-06-28T11:57:26.147 回答
0

模糊可以这样完成：

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

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

于 2015-02-28T19:47:00.713 回答