Installation

Grab it from a package manager:

• npm: npm install --save blur-overlay
• bower: bower install --save blur-overlay

Or grab the source:

• Development (unminified, ~8kb)
• Production (minified, ~4kb)

Relies on jQuery (>=2.2.4) and jQuery UI (>=1.12.0).

Browser Compatibility

As of September 2016, there are some browser defects around CSS blur filters:

• Blur causes positioning issues with absolute and fixed position elements in Firefox and Edge
• Internet Explorer does not support blur filters

Consider the possible need for workarounds, or disabling the blur effect, for some browsers before using this plugin!

Example

    $(document).on('ready', function () {

      // Browsers that don't (fully) support filters
      var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
      var browserIsIE = /Trident\/\d+/.test(navigator.userAgent);
      var opacity = (browserIsEdge || browserIsIE) ? '0.75' : '0.33';

      // Grab the element you want to "wrap" with blur
      var $target = $('#something');

      // Grab the content you want to display in the overlay
      var $overlay = $('#overlay').detach().show();

      // Initialize the overlay
      $target.blurOverlay({
        // Overlay content
        content: $overlay,
        // Background color of the overlay (use rgba for opacity)
        backgroundColor: 'rgba(255, 255, 255, ' + opacity + ')',
        // Blur amount (default 12px)
        blurAmount: '10px',
        // Duration of CSS transitions
        transitionDuration: '500ms',
        // Type of CSS transitions
        transitionType: 'cubic-bezier(.22, .57, .27, .92)',
        // Elements to "mask" (adds an extra overlay to improve visual contrast)
        masks: [{
          selector: '.mask-me', // Required
          color: 'rgba(255, 255, 255, 0.5)',
          opacity: 1,
          width: '400px',
          height: '300px'
        }],
        // Override the z-index used for the overlay and masks
        zIndex: 3333,
        // Disable the blur filter (for incompatible/buggy browsers or whatever reason)
        noFilter: browserIsEdge || browserIsIE
      });

      // Show the overlay
      $target.blurOverlay('show').then(function () {
        console.log('overlay is showing');
      });

      // Hide the overlay
      $target.blurOverlay('hide').then(function () {
        console.log('overlay is hidden');
      });

      // Update the content of the overlay
      $target.blurOverlay('content', '<p>New Content</p>');

      // Determine if the overlay is showing (true or false)
      console.log('Overlay is showing: ' + $target.blurOverlay('isShowing'));

      // Listen for events on the overlay
      $target.on('blurOverlay.beforeShow', function () {
        console.log('beforeShow event');
      });
      $target.on('blurOverlay.show', function () {
        console.log('show event');
      });
      $target.on('blurOverlay.beforeHide', function () {
        console.log('beforeHide event');
      });
      $target.on('blurOverlay.hide', function () {
        console.log('hide event');
      });

      // Destroy the plugin instance and clean up the DOM
      $target.blurOverlay('destroy');

    });