jQuery Plugin To Popup A Modal Window with Blurred Background - BlurBox

BlurBox is a small interesting jQuery plugin that blurs the background content while opening a modal/lightbox on your web page.

How to use it:

1. Load jQuery library and the jQuery blurbox plugin at the end of the document before closing body tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="blurbox.js"></script>

2. Wrap the lightbox content in an DIV container.

<div id="popup" style="width: 500px; display: none;">
Your Content Goes Here
</div>

3. Call the plugin on the container and set the options for your lightbox & blurred background.

setTimeout(function() {
var bb = $('#popup').blurbox({
// The blur radius in pixels
blur: 10, 

// use CSS transitions to animate the blur. 
animateBlur: true, 

// The duration of the show and hide animation
duration: 300, 

// autosize the lightbox to fit the dimensions of the content. 
// Otherwise will use width/height 50%
autosize: true, 

// If not null, the plugin will tint the background with this colour
bgColor: 'rgba(255,255,0,0.2)',

// The plugin will blur this element.
bodyContent: null,

// clicking on the blurred background will close the box
closeOnBackgroundClick: true
})
bb.show();
},1000);

Change logs:

2017-05-02

• Fixed issues with autosize and blurring

2015-05-02

• Added closeOnBackgroundClick

2014-10-31

• fixes

---

This awesome jQuery plugin is developed by nrbrook. For more Advanced Usages, please check the demo page or visit the official website.