/** * Usage: $("").dimBackground([options] [, callback]); * * @author Andy Wermke * */ (function ($) { 'use strict'; var dimmedNodes = []; /// [ {$curtain: ?, $nodes: jQueryArray} ] /** * Dim the whole page except for the selected elements. * @param options * Optional. See `$.fn.dimBackground.defaults`. * @param callback * Optional. Called when dimming animation has completed. */ $.fn.dimBackground = function (options, callback) { var params = parseParams(options, callback); options = params.options; callback = params.callback; options = $.extend({}, $.fn.dimBackground.defaults, options); // Initialize curtain var $curtain = $('
'); $curtain.css({ position: 'fixed', left: 0, top: 0, width: '100%', height: '100%', background: 'black', opacity: 0, zIndex: options.curtainZIndex }); $('body').append($curtain); // Top elements z-indexing this.each(function (){ var $this = $(this); var opts = $.meta ? $.extend( {}, options, $this.data() ) : options; this._$curtain = $curtain; this._originalPosition = $this.css('position').toLowerCase(); if (this._originalPosition != "absolute" && this._originalPosition != "fixed") { $this.css('position', 'relative'); } this._originalZIndex = $this.css('z-index'); if (this._originalZIndex == "auto" || this._originalZIndex <= opts.curtainZIndex) { $this.css('z-index', opts.curtainZIndex+1); } }); $curtain.stop().animate({opacity: options.darkness}, options.fadeInDuration, callback); dimmedNodes.push( {$curtain: $curtain, $nodes: this} ); return this; }; /** * Undo the dimming. * @param options * Optional. See `$.fn.dimBackground.defaults`. * @param callback * Optional. Called when "undimming" animation has completed. */ $.fn.undim = function (options, callback) { var params = parseParams(options, callback); options = params.options; callback = params.callback; options = $.extend({}, $.fn.dimBackground.defaults, options); var $curtain; var nodeZIndexMap = []; /// [ [node, originalPosition, originalZIndex], ... ] this.each(function () { var $this = $(this); var opts = $.meta ? $.extend( {}, options, $this.data() ) : options; if (this._$curtain) { if (!$curtain) { $curtain = this._$curtain; } if (typeof this._originalPosition != "undefined") { nodeZIndexMap.push( [this, this._originalPosition, this._originalZIndex] ); } this._$curtain = undefined; this._originalPosition = undefined; this._originalZIndex = undefined; } }); if ($curtain) { $curtain.animate({opacity: 0}, options.fadeOutDuration, function () { for (var i=0; i