Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added functionality to use custom zIndex option #3

Merged
merged 1 commit into from

2 participants

@oxigenka

I've just added zIndex to the defaults (and in opts, of course), because of it is an important thing and we should give to programmers an ability to manipulate it.
Also I've fixed minimized version of plugin with overlayClass option added before and with zIndex option too.

@tommcfarlin tommcfarlin merged commit 41f5ee6 into tommcfarlin:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 19, 2012
  1. @oxigenka
This page is out of date. Refresh to see the latest.
Showing with 86 additions and 88 deletions.
  1. +83 −85 js/jquery.overlay.js
  2. +3 −3 js/jquery.overlay.min.js
View
168 js/jquery.overlay.js
@@ -11,89 +11,88 @@
(function($) {
- $.fn.overlay = function(options) {
+ $.fn.overlay = function(options) {
var opts = $.extend({}, $.fn.overlay.defaults, options);
- // If overlayClass is defined we don't want to use opts.color since it will override
- // the background from the element.
- if( opts.overlayClass ) {
- delete opts.color;
- }
-
- return this.each(function(evt) {
+ // If overlayClass is defined we don't want to use opts.color since it will override
+ // the background from the element.
+ if( opts.overlayClass ) {
+ delete opts.color;
+ }
+
+ return this.each(function(evt) {
if(!$(this).hasClass('overlay-trigger')) {
show(create($(this), opts), opts);
}
- });
-
- }; // end overlay
+ });
+
+ }; // end overlay
/*--------------------------------------------------*
* helper functions
*--------------------------------------------------*/
-
+
/**
- * Creates the overlay element, applies the styles as specified in the
+ * Creates the overlay element, applies the styles as specified in the
* options, and sets up the event handlers for closing the overlay.
*
* opts The plugin's array options.
*/
function create($src, opts) {
-
+
// prevents adding multiple overlays to a container
$src.addClass('overlay-trigger');
-
+
// create the overlay and add it to the dom
var iTop = 0;
- if($.browser.mozilla && opts.container.toString() === 'body') {
+ if($.browser.mozilla && opts.container.toString() === 'body') {
iTop = $('html').scrollTop();
} else {
iTop = $(opts.container).scrollTop();
} // end if/else
-
- var overlay = null;
+
+ var overlay = $('<div></div>').addClass(opts.overlayClass);
+
if($src.css('position') === 'relative') {
-
- overlay = $('<div></div>')
- .addClass(opts.overlayClass)
- .css({
- background: opts.color,
- opacity: opts.opacity,
- top: $src.offset().top,
- left: $src.offset().left,
- width: $src.width(),
- height: $src.height(),
- position: 'absolute',
- zIndex: 1000,
- display: 'none',
- overflow: 'hidden'
- });
-
+
+ overlay
+ .css({
+ background: opts.color,
+ opacity: opts.opacity,
+ top: $src.offset().top,
+ left: $src.offset().left,
+ width: $src.width(),
+ height: $src.height(),
+ position: 'absolute',
+ zIndex: opts.zIndex,
+ display: 'none',
+ overflow: 'hidden'
+ });
+
} else {
-
- overlay = $('<div></div>')
- .addClass(opts.overlayClass)
- .css({
- background: opts.color,
- opacity: opts.opacity,
- top: opts.container.toString() === 'body' ? iTop : $(opts.container).offset().top,
- left: $(opts.container).offset().left,
- width: opts.container === 'body' ? '100%' : $(opts.container).width(),
- height: opts.container === 'body' ? '100%' : $(opts.container).height(),
- position: 'absolute',
- zIndex: 1000,
- display: 'none',
- overflow: 'hidden'
- });
-
+
+ overlay
+ .css({
+ background: opts.color,
+ opacity: opts.opacity,
+ top: opts.container.toString() === 'body' ? iTop : $(opts.container).offset().top,
+ left: $(opts.container).offset().left,
+ width: opts.container === 'body' ? '100%' : $(opts.container).width(),
+ height: opts.container === 'body' ? '100%' : $(opts.container).height(),
+ position: 'absolute',
+ zIndex: opts.zIndex,
+ display: 'none',
+ overflow: 'hidden'
+ });
+
} // end if/else
-
+
// if specified, apply the gloss
if(opts.glossy) {
- applyGloss(opts, overlay);
+ applyGloss(opts, overlay);
} // end if
-
+
// setup the event handlers for closing the overlay
if(opts.closeOnClick) {
$(overlay).click(function() {
@@ -101,14 +100,14 @@
$src.removeClass('overlay-trigger');
});
} // end if
-
+
// finally add the overlay
$(opts.container).append(overlay);
-
+
return overlay;
-
+
} // end createOverlay
-
+
/**
* Displays the overlay using the effect specified in the options. Optionally
* triggers the onShow callback function.
@@ -116,27 +115,27 @@
* opts The plugin's array options.
*/
function show(overlay, opts) {
-
+
switch(opts.effect.toString().toLowerCase()) {
-
+
case 'fade':
$(overlay).fadeIn('fast', opts.onShow);
break;
-
+
case 'slide':
$(overlay).slideDown('fast', opts.onShow);
break;
-
+
default:
$(overlay).show(opts.onShow);
break;
-
+
} // end switch/case
-
+
$(opts.container).css('overflow', 'hidden');
-
+
} // end show
-
+
/**
* Hides the overlay using the effect specified in the options. Optionally
* triggers the onHide callback function.
@@ -144,9 +143,9 @@
* opts The plugin's array options.
*/
function close(overlay, opts) {
-
+
switch(opts.effect.toString().toLowerCase()) {
-
+
case 'fade':
$(overlay).fadeOut('fast', function() {
if(opts.onHide) {
@@ -155,7 +154,7 @@
$(this).remove();
});
break;
-
+
case 'slide':
$(overlay).slideUp('fast', function() {
if(opts.onHide) {
@@ -164,7 +163,7 @@
$(this).remove();
});
break;
-
+
default:
$(overlay).hide();
if(opts.onHide) {
@@ -172,13 +171,11 @@
}
$(overlay).remove();
break;
-
} // end switch/case
-
+
$(opts.container).css('overflow', 'auto');
-
} // end close
-
+
/**
* Adds the gloss effect to the overlay.
*
@@ -186,7 +183,7 @@
* overlay The overlay on which the gloss will be applied
*/
function applyGloss(opts, overlay) {
-
+
var gloss = $('<div></div>');
$(gloss).css({
background: '#fff',
@@ -194,35 +191,36 @@
width: '200%',
height: '100%',
position: 'absolute',
- zIndex: 1001,
+ zIndex: opts.zIndex + 1,
msTransform: 'rotate(45deg)',
webkitTransform: 'rotate(45deg)',
oTransform: 'rotate(45deg)'
});
-
+
// at the time of development, mozTransform didn't work with >= jQuery 1.5
if($.browser.mozilla) {
- $(gloss).css('-moz-transform', 'rotate(45deg');
+ $(gloss).css('-moz-transform', 'rotate(45deg');
} // end if
-
+
$(overlay).append(gloss);
-
+
} // end applyGloss
-
+
/*--------------------------------------------------*
* default settings
*--------------------------------------------------*/
-
- $.fn.overlay.defaults = {
+
+ $.fn.overlay.defaults = {
color: '#000',
- overlayClass: 'overlay',
+ overlayClass: 'overlay',
opacity: 0.5,
effect: 'none',
onShow: null,
onHide: null,
closeOnClick: false,
glossy: false,
+ zIndex: 1000,
container: 'body'
- }; // end defaults
+ }; // end defaults
-})(jQuery);
+})(jQuery);
View
6 js/jquery.overlay.min.js
@@ -9,7 +9,7 @@
* http://moreco.de/simple-overlay
*/
(function($){$.fn.overlay=function(options){var opts=$.extend({},$.fn.overlay.defaults,options);return this.each(function(evt){if(!$(this).hasClass('overlay-trigger')){show(create($(this),opts),opts);}});};function create($src,opts){$src.addClass('overlay-trigger');var iTop=0;if($.browser.mozilla&&opts.container.toString()==='body'){iTop=$('html').scrollTop();}else{iTop=$(opts.container).scrollTop();}
-var overlay=null;if($src.css('position')==='relative'){overlay=$('<div></div>').addClass('overlay').css({background:opts.color,opacity:opts.opacity,top:$src.offset().top,left:$src.offset().left,width:$src.width(),height:$src.height(),position:'absolute',zIndex:1000,display:'none',overflow:'hidden'});}else{overlay=$('<div></div>').addClass('overlay').css({background:opts.color,opacity:opts.opacity,top:opts.container.toString()==='body'?iTop:$(opts.container).offset().top,left:$(opts.container).offset().left,width:opts.container==='body'?'100%':$(opts.container).width(),height:opts.container==='body'?'100%':$(opts.container).height(),position:'absolute',zIndex:1000,display:'none',overflow:'hidden'});}
+var overlay=$('<div></div>').addClass(opts.overlayClass);if($src.css('position')==='relative'){overlay.css({background:opts.color,opacity:opts.opacity,top:$src.offset().top,left:$src.offset().left,width:$src.width(),height:$src.height(),position:'absolute',zIndex:opts.zIndex,display:'none',overflow:'hidden'});}else{overlay.css({background:opts.color,opacity:opts.opacity,top:opts.container.toString()==='body'?iTop:$(opts.container).offset().top,left:$(opts.container).offset().left,width:opts.container==='body'?'100%':$(opts.container).width(),height:opts.container==='body'?'100%':$(opts.container).height(),position:'absolute',zIndex:opts.zIndex,display:'none',overflow:'hidden'});}
if(opts.glossy){applyGloss(opts,overlay);}
if(opts.closeOnClick){$(overlay).click(function(){close(overlay,opts);$src.removeClass('overlay-trigger');});}
$(opts.container).append(overlay);return overlay;}
@@ -20,6 +20,6 @@ $(this).remove();});break;case'slide':$(overlay).slideUp('fast',function(){if(op
$(this).remove();});break;default:$(overlay).hide();if(opts.onHide){opts.onHide();}
$(overlay).remove();break;}
$(opts.container).css('overflow','auto');}
-function applyGloss(opts,overlay){var gloss=$('<div></div>');$(gloss).css({background:'#fff',opacity:0.2,width:'200%',height:'100%',position:'absolute',zIndex:1001,msTransform:'rotate(45deg)',webkitTransform:'rotate(45deg)',oTransform:'rotate(45deg)'});if($.browser.mozilla){$(gloss).css('-moz-transform','rotate(45deg');}
+function applyGloss(opts,overlay){var gloss=$('<div></div>');$(gloss).css({background:'#fff',opacity:0.2,width:'200%',height:'100%',position:'absolute',zIndex:opts.zIndex+1,msTransform:'rotate(45deg)',webkitTransform:'rotate(45deg)',oTransform:'rotate(45deg)'});if($.browser.mozilla){$(gloss).css('-moz-transform','rotate(45deg');}
$(overlay).append(gloss);}
-$.fn.overlay.defaults={color:'#000',opacity:0.5,effect:'none',onShow:null,onHide:null,closeOnClick:false,glossy:false,container:'body'};})(jQuery);
+$.fn.overlay.defaults={color:'#000',overlayClass:'overlay',opacity:0.5,effect:'none',onShow:null,onHide:null,closeOnClick:false,glossy:false,zIndex:1000,container:'body'};})(jQuery);
Something went wrong with that request. Please try again.