Blur Overlay

A jQuery plugin for displaying a full-screen overlay over blurred body content

Installation

Grab it from a package manager:

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

Or grab the source:

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');

    });
            

Made by Ben Centra. Check out the GitHub project.

Fork Star