BlurBox is a lightbox which blurs the background. Simple!
On small screens (<= 480px), a lightbox doesn't make much sense, so the plugin instead switches to a sheet which slides up from the bottom and just darkens the background (no blur)
It is a jQuery plugin, but it wouldn't be much work to seperate out the jQuery goodness or even just substitute jQuery for a shim with the same interface.
I created this plugin for my personal website, NickBrook.me
The plugin works as a UMD jQuery Plugin so can be loaded with an AMD loader or just as a normal script.
$('#popupContent').blurbox().show();
// OR
new $.blurbox('#popupContent').show();
// OR
require(['blurbox'], function(BlurBox) {
new Blurbox(document.getElementById('popupContent')).show();
});This works by adding a blur filter to the main body content. As such, you must have a container element which contains everything you want to blur that isn't the body element. By default, the plugin uses the first child of body. You can specify a different element as options.bodyContent
While not very extensively tested, this should work in IE 6+ (maybe), Firefox, Safari, Chrome, Opera
The options object can be passed in to the constructor, set afterwards using object.applyOptions( options ), or passed in to show( options ) and hide( options )
Defaults can be set on BlurBox.defaults
blur (3) [px] The blur radius in pixels
animateBlur (true) [bool] If the plugin should use CSS transitions to animate the blur. This can be slow on older browsers / low power graphics cards
duration (300) [ms] The duration of the show and hide animation
autosize (true) [bool] If true, the plugin will autosize the lightbox to fit the dimensions of the content. Otherwise will use width/height 50%
bgColor ('rgba(0,0,0,0.2)') [colour string] If not null, the plugin will tint the background with this colour
bodyContent (null) [element] The plugin will blur this element. By default, uses the first element with the class blurbox-bodyContent
compactTimingFunctionIn ('cubic-bezier(0.165, 0.84, 0.44, 1)') [string] The CSS transition timing function to use for in transitions when in compact mode (small widths)
compactTimingFunctionOut ('cubic-bezier(0.55, 0.055, 0.675, 0.19)') [string] The CSS transition timing function to use for out transitions when in compact mode (small widths)
compactTimingFunction (null) [string] The CSS transition timing function to use for both in and out transitions when in compact mode (small widths). Any non-null value will override the compactTimingFunctionIn and compactTimingFunctionOut options
closeOnBackgroundClick (true) [bool] If true, clicking on the blurred background will close the box
noScroll (true) [bool] If true, scrolling of the body content is prevented when the blur box is displayed
options See Options
element | selector This is the content of the lightbox you want to display
options See Options
Hide the currently active blurbox
options See Options
Show the lightbox
options See Options
Hide the lightbox
options See Options
Show or hide the lightbox
options See Options
Set the options
options See Options
Resize the lightbox to fit the content. Use this if the content size changes
renderOffscreen If true, positions the content offscreen to get its size. If already displayed, pass false or no value
A boolean value which holds the current display status of the lightbox
The jQuery object for the DOM element this lightbox contains