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.
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
positiontag to make any elementfixedorabsolute. 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();
