Ось мій погляд на це 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');
}
});
