这是我对jQuery的看法。解决方案不是通用的，这意味着必须根据实际设计调整一些位置和内容。
基本上，我所做的是：在触发器上克隆/将整个背景（应该模糊的内容）移到内容不模糊的容器中（如果宽度不全，则可以选择隐藏隐藏的溢出）并正确定位。需要注意的是，在窗口调整大小时，模糊div的位置将与原始值不匹配，但这可以通过一些窗口调整大小功能来解决（老实说，我现在不能对此感到烦恼）。
非常感谢您对此解决方案的意见！
谢谢
这是小提琴，未经IE测试。
的HTML
<div class="slide-up">
<div class="slide-wrapper">
<div class="slide-background"></div>
<div class="blured"></div>
<div class="slide-content">
<h2>Pop up title</h2>
<p>Pretty neat!</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<h1>Some title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
的CSS
body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}
jQuery的
// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);
$('.trigger').click(function () {
if ($(this).hasClass('triggered')) { // sliding up
$('.blured').animate({
height: '0px',
background: background
}, 1000, function () {
$('.blured .wrapper').remove();
});
$('.slide-up').slideUp(700);
$(this).removeClass('triggered');
} else { // sliding down
$('.wrapper').clone().appendTo('.blured');
$('.slide-up').slideDown(1000);
$offset = $('.slide-wrapper').offset();
$('.blured').animate({
height: $offset.top + height + slide_top + 'px'
}, 700);
$('.blured .wrapper').animate({
left: -$offset.left,
top: -$offset.top
}, 100);
$(this).addClass('triggered');
}
});
