Package Exports
- blur-overlay
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blur-overlay) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
blur-overlay

jQuery plugin for creating blurry overlays. Can customize the content, blur amount, and transition types.
Requires jQuery (>=2.2.4
) and jQuery UI (>=1.12.0
).
Installation
You can install blur-overlay from a package manager:
- npm:
npm install --save blur-overlay
- bower:
bower install --save blur-overlay
Or you can grab the latest .js
file:
- Development (unminified, ~8kb)
- Production (minified, ~4kb)
Usage
$(document).on('ready', function () {
// Because Edge + CSS filters cause position bugs
var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
// Grab the element you want to "wrap" with blur
var $target = $('#something');
// Grab the content you want to display in the overlay
var $overlay = $('#overlay').detach().show();
// Initialize the overlay
$target.blurOverlay({
// Overlay content
content: $overlay,
// Background color of the overlay (use rgba for opacity)
backgroundColor: 'rgba(255, 255, 255, .25)',
// Blur amount (default 12px)
blurAmount: '10px',
// Duration of CSS transitions
transitionDuration: '500ms',
// Type of CSS transitions
transitionType: 'cubic-bezier(.22, .57, .27, .92)',
// Elements to "mask" (adds an extra overlay to improve visual contrast)
masks: [{
selector: '.mask-me', // Required
color: 'rgba(255, 255, 255, 0.5)',
opacity: 1,
width: '400px',
height: '300px'
}],
// Override the z-index used for the overlay and masks
zIndex: 3333,
// Disable the blur filter (for incompatible/buggy browsers or whatever reason)
noFilter: browserIsEdge
});
// Show the overlay
$target.blurOverlay('show').then(function () {
console.log('overlay is showing');
});
// Hide the overlay
$target.blurOverlay('hide').then(function () {
console.log('overlay is hidden');
});
// Update the content of the overlay
$target.blurOverlay('content', '<p>New Content</p>');
// Determine if the overlay is showing (true or false)
console.log('Overlay is showing: ' + $target.blurOverlay('isShowing'));
// Listen for events on the overlay
$target.on('blurOverlay.beforeShow', function () {
console.log('beforeShow event');
});
$target.on('blurOverlay.show', function () {
console.log('show event');
});
$target.on('blurOverlay.beforeHide', function () {
console.log('beforeHide event');
});
$target.on('blurOverlay.hide', function () {
console.log('hide event');
});
// Destroy the plugin instance and clean up the DOM
$target.blurOverlay('destroy');
});
Developing
First and foremost, fork/clone the repo and run:
cd blur-overlay
# Use the recommended node version (6.x)
nvm use
# Install dependencies
npm install
If you don't have nvm
, get it here: https://github.com/creationix/nvm
npm scripts
Use the npm scripts defined in package.json
to perform common build tasks:
Command | Description |
---|---|
npm start |
Run lint, tests, and build upon changes to src/ and spec/ |
npm test |
Run unit tests using Karma and PhantomJS (single-run only) |
npm run test:serve |
Start the Karma server (can debug at http://localhost:9876) |
npm run lint |
Lint src/ and spec/ with ESLint (with --fix flag) |
npm run build |
Transpile src/ using Babel and minify using UglifyJS2, sending output to dist/ |
npm run demo |
Launch the demo page (index.html ) |
Make sure to run npm run build
in between code changes to keep the demo page up-to-date!
License
MIT. See LICENSE.