bluroverlay.js
v1.0.1
Published
jQuery plugin for blur overlay
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.
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();