I'm currently working on implementing foggy.js () to create a blurred background effect for Bootstrap's Modal. While I've successfully blurred all elements in the background, the Modal Popup itself is also appearing blurry. So my question is, how can I apply the blur effect only to the backdrop and its child elements, keeping the Modal clear while everything else remains blurred?
Below is the code snippet I'm using. Please note that it includes code to manage Vimeo playback and Carousel functionality.
$(document).ready(function(){
$('.close-video').on('click', function (event) {
for (var i = 0; i < window.frames.length; i++) {
window.frames[i].postMessage(JSON.stringify({ method: 'pause' }), '*') //Pauses Vimeo Video
$('#AVRS-Carousel').carousel('cycle'); //Starts Carousel
$('body').foggy(false); //Disables Foggy.js
}
});
$('[data-frame-index]').on('click', function (event) {
var $span = $(event.currentTarget),
index = $span.data('frame-index');
window.frames[index].postMessage(JSON.stringify({ method: 'play' }), '*') //Auto Plays Vimeo
$('#AVRS-Carousel').carousel('pause'); //Pauses Carousel
$('body').foggy(); //Applies Foggy.js
});
});
Additionally, here is the CSS for Bootstrap's modal-backdrop class:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
filter: blur(5px)
}
Thank you in advance for your assistance.