Package Exports

bluroverlay.js

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 (bluroverlay.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

Example GIF

To see live demo click here!

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 (unminified, ~4kb)
Production (minified, ~3kb)

Usage

Basic HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <!-- fixed element, which will blur elements behind it -->
    <div id="element-id">
        <p>... top element html here ...</p>
    </div>
    <!-- scrollable content, rest of elements -->
    <div class="content-wrapper-class">
        <p>... your html here ...</p>
    </div>

    <!-- include jQuery library and blur overlay plugin -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="dist/bluroverlay.min.js"></script>
</body>
</html>

Script

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
```
<div id="modal" name="blurred-modal">
  <p>Your modal html here</p>
</div>
```
Script API
```
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.
```
blurOverlay.hideBlurModal();
```

License

GPL