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.
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)
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.
- 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.
-
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();