You can find the demo at http://codepen.io/jaeming/pen/EwsqC.

Here's a popup that appears while blurring out the body underneath. click the 'X' close on the popup and the blur transition back while the popup fades off.

Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or lightbox.

Uses CSS3 Filter (for blur) and CSS3 Animation for blur transitions. The jQuery is minimal in this iteration, simply used to fade in the pop-up and add and remove the CSS3 classes for blurring.

I was planning to use Foundation for layout purposes but the foundation classes ended up being very minimal, using stlying for only the betton and the the placement of the pop-up on the grid. I may replace that at a little date to reduce load.