https://github.com/hardikdabhi/bluroverlay.js
Repo for blur overlay jQuery library
https://github.com/hardikdabhi/bluroverlay.js
blur-backgrounds blurs-elements css html jquery opacity
Last synced: about 2 months ago
JSON representation
Repo for blur overlay jQuery library
- Host: GitHub
- URL: https://github.com/hardikdabhi/bluroverlay.js
- Owner: hardikdabhi
- License: gpl-3.0
- Created: 2016-08-05T06:44:03.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-06-01T17:50:08.000Z (over 2 years ago)
- Last Synced: 2025-10-22T10:43:25.530Z (about 2 months ago)
- Topics: blur-backgrounds, blurs-elements, css, html, jquery, opacity
- Language: JavaScript
- Homepage: http://hardikdabhi.com/projects/bluroverlay.js/
- Size: 1.12 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bluroverlay.js
jQuery plugin that creates an element which blurs elements behind it (background elements). Also provides API to created a blurred modal/mask.
Requires jQuery library.
[To see live demo click here!](http://www.hardikdabhi.com/projects/bluroverlay.js/demo/)
## Installation
Install using either of below package manager.
* __npm__: `npm install --save bluroverlay.js`
* __bower__: `bower install --save bluroverlay.js`
Or download plugin library directly:
* [Development](https://raw.githubusercontent.com/hardikdabhi/bluroverlay.js/master/dist/bluroverlay.js) (unminified, ~4kb)
* [Production](https://raw.githubusercontent.com/hardikdabhi/bluroverlay.js/master/dist/bluroverlay.min.js) (minified, ~3kb)
## Usage
Basic HTML
```html
... top element html here ...
... your html here ...
```
Script
```js
var blurOverlay = $("#element-id").bluroverlay({
contentWrapperClass: "content-wrapper-class",
blur: "10",
opacity: 0.3,
background: "#fff"
});
```
> Note: CSS needs to be applied as required to make elements fixed on page. Plugin does NOT apply css `position` tag to make any element `fixed` or `absolute`. Download and run demo for example.
## Options
* __contentWrapperClass__ ['content-wrapper'] - Wrapper classname, entire html wrapped within this class will appear blurred when under overlayed element
* __blur__ ['10'] - Amount of blur to be applied
* __opacity__ [0.4] - Opacity of overlayed element
* __background__ ['#fff'] - CSS background applied to overlayed element
> Values mentioned in [] is default for option.
## API
* __showBlurModal(elementId)__
Shows a modal with overlayed element and wrapper elements blurred in background. Pass modal element id in `elementId`.
Modal HTML
```html
Your modal html here
```
Script API
```javascript
blurOverlay.showBlurModal("modal");
```
> Give `name=blurred-modal`. This will hide the modal on init and show it while using this API.
* __hideBlurModal()__
Hides previously shown modal.
```js
blurOverlay.hideBlurModal();
```
## License
[GPL](LICENSE)