Skip to content

Instantly share code, notes, and snippets.

@jiggliemon

jiggliemon/Overlay.Mask.js

Created January 3, 2011 04:34
Show Gist options
  • Save jiggliemon/763128 to your computer and use it in GitHub Desktop.
Save jiggliemon/763128 to your computer and use it in GitHub Desktop.
Download ZIP
a simple Overlay class
Raw
Overlay.css
/* --- Modal Overlay Styles --- */
#mask {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
.window {position:absolute;left:0;top:0;width:350px;height:250px;display:none;z-index:9000;padding:20px;background: #fff;padding: 0px; #border: 3px #999 solid;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.4);border-radius: 2px;}
.window .close {position: absolute; top: -19px; right: 0px; /*height: 14px;*/ width: 50px; /*text-indent: -1500em;*/ overflow: hidden;color:#fff; text-transform: lowercase;cursor: pointer;background: #c00; font-size: 10px; padding: 3px 5px;text-align: center;}
.window .tl,.window .tm,.window .tr,.window .l,.window .r,.window .bl,.window .bm,.window .bs,.window .br {background-image: url(/images/toshibadirect/ui/chrome/drop-shadow.png);display: block;position: absolute;}
.window .tl,.window .tm,.window .tr,.window .l,.window .r,.window .bl,.window .bm,.window .bs,.window .br {#display:none;}
.window .tl {height: 12px; width: 15px; top:-12px; left:-15px; background-position: top left;}
.window .tm {height: 12px; width: 340px; top:-12px; left:0px; background-position: -15px 0px;}
.window .tr {height: 12px; width: 25px; top: -12px; right: -15px; background-position: top right;}
.window .l {width: 15px;height: 250px; top:0px; left: -15px; background-position: 0px -12px;}
.window .r {width: 15px;height: 250px; top:0px; right: -15px; background-position: right -12px;}
.window .bl {width: 15px;height: 25px; bottom:-20px; left: -15px; background-position: bottom left;}
.window .bm {height: 20px; bottom: -20px; background-position: -15px bottom;}
.window .bs {height: 20px;width: 20px; bottom: -20px;right:0px; background-position: -896px bottom;}
.window .br {height: 25px;width: 15px; bottom: -20px;right: -15px; background-position: bottom right;}
/* --- End Modal Overlay Styles --- */
Raw
Overlay.js
(function($) {
var Overlay = window.Overlay = function(){
var options;
if(arguments.length == 2){
this.element = $(arguments[0]);
options = arguments[1];
} else {
options = arguments[0];
}
//merge options with defaults
this.options = $.extend( true ,{
'width': 350,
'height':250,
'call':'something',
'modal':true,
'windowId': 'window',
'rel':'loading',
"closeButton":true,
'dropshadow':true,
'mask':{
active:true,
opacity:'0.5',
clickClose: true,
target: 'body',
id: 'mask',
shim: true
}
}, options || {});
this.initialize();
};
Overlay.prototype = {
initialize: function(){
var self = this;
self.doc = $(document);
self.initWindow();
if(self.options.closeButton){
self.initCloseButton();
}
$(window).resize(function(){
self.centerWindow();
});
},
launch: function(){
var self = this;
self.openWindow();
},
openWindow: function(){
var self = this;
self.centerWindow();
self.doc.trigger('window.before.open');
self.win.fadeIn('fast', function(){
self.doc.trigger('window.open');
});
},
closeWindow: function(){
var self = this;
self.win.fadeOut('fast');
},
initWindow: function(){
var self = this,
windowId = self.getWindowId()+'-window',
win = document.getElementById(windowId);
self.win = win?$(win):$('<div id="'+windowId+'" class="window" />').appendTo($('body')[0]);
self.win.css({
'width' : self.options.width,
'height': self.options.height
});
if(self.options.dropshadow && self.win.children('.tl').length <= 0){
self.win.append('<span class="tl"></span><span class="tm"></span><span class="tr"></span>');
self.win.append('<span class="bl"></span><span class="bm"></span><span class="bs"></span><span class="br"></span>');
self.win.append('<span class="l"></span><span class="r"></span>');
//adjust shadow sizes.
$('#'+windowId+' span.tm').css('width', self.options.width - 10);
$('#'+windowId+' span.l,#'+windowId+' span.r').css('height',self.options.height - 5);
$('#'+windowId+' span.bm').css('width',self.options.width - 20);
}
},
initCloseButton: function(){
var self = this;
self.closeButton = $('<span>',{
"class": 'close',
"text": 'close'
});
self.win.append(self.closeButton);
self.closeButton.click(function(){
self.closeWindow()
});
},
centerWindow: function(){
var self = this;
var docHeight = $(document).height();
var winHeight = $(window).height();
var winWidth = $(window).width();
self.win.css({
'top' : winHeight/2 - self.options.height*.5 + $(window).scrollTop(),
'left' : winWidth/2 - self.options.width*.5
});
},
getWindowId: function(){
if(this.element){
return this.element.attr('id') || this.element.attr('rel');
}
return this.options.windowId;
},
setContent: function(content){
var self = this,
contentId = self.getWindowId()+'-content',
contentLayer = self.win.find('#'+contentId);
if(!contentLayer.length > 0){
contentLayer = $('<div id="'+contentId+'" class="window-content" />');
self.win.append(contentLayer);
}
contentLayer.html(content);
return true;
}
};
$.fn.overlay = function(options){
this.click(function(event){
event.preventDefault();
var o = new Overlay(this, options);
$(this).data('overlay',o);
o.launch();
});
return this;
};
})(jQuery);
Raw
Overlay.Mask.js
if(!window.Overlay){
throw new Error('the Class "Overlay" doesn\'t appear to be present');
}
/*
* Overlay Mask
*/
(function($){
var Mask = {
_mask: false,
initMask: function(){
var self = this;
self.target = $(self.options.mask.target);
self.doc = $(document);
self.target.append(self.getMask().hide());
self._attachEvents();
if(self.options.mask.shim){
self._initShim();
}
},
_attachEvents:function(){
var self = this;
self.getMask().bind({
click: function(){
self.doc.trigger('mask.click');
}
});
self.doc.bind({
'mask.resize': function(){
self.resizeMask();
}
});
$(window).resize(function(){
self.doc.trigger('mask.resize');
});
},
resizeMask: function(){
var self = this;
self.getMask().css({
'width':$(window).width(),
'height':self.doc.height()
});
return self;
},
showMask: function(){
var self = this;
$('body').css('overflow','hidden');
self.doc.trigger('mask.before.open');
self.resizeMask();
self.getMask().css({
'z-index':3000,
'opacity':0,
'display': 'block'
}).animate({
'opacity': self.options.mask.opacity
}, 100);
self.doc.trigger('mask.open');
self.doc.trigger('mask.after.open');
},
hideMask: function(){
var self = this;
$('body').css('overflow','auto');
self.doc.trigger('mask.before.close');
self.getMask().fadeOut('fast');
self.doc.trigger('mask.close');
self.doc.trigger('mask.after.close');
},
getMask: function(){
var self = this;
if(this._mask){
return this._mask;
}
var m = document.getElementById(self.options.mask.id),
mask = m ? $(m) : this._createMask();
self.setMask(mask);
return self._mask;
},
setMask: function(element){
var self = this;
if(element){
self._mask = element;
}
return self;
},
_createMask: function(){
var self = this;
var mask = $('<div id="'+self.options.mask.id+'"></div>');
return mask;
},
inject: function(){
var self = this;
self.target.append(self.mask);
},
_initShim: function(){
var self = this;
self._shim = $('<iframe />', {
"scrolling": "no",
"background":"transparent",
"frameBorder": "0",
"src":"javascript:'<html></html>\';"
}).css({
"top":0,
"left":0,
"position":"absolute",
"z-index": 2999
}).hide().appendTo(self.target);
self.doc.bind({
'mask.before.open':function(){
self._shim.css({
'width':$(window).width(),
'height':self.doc.height(),
}).show();
},
'mask.after.close':function(){
self._shim.hide();
}
})
}
};
var initialize = Overlay.prototype.initialize;
Mask.initialize = function(){
var self = this;
initialize.call(this);
self.initMask();
};
var launch = Overlay.prototype.launch;
Mask.launch = function(){
var self = this;
self.showMask();
launch.call(this);
};
var closeWindow = Overlay.prototype.closeWindow;
Mask.closeWindow = function(){
var self = this;
self.hideMask();
closeWindow.call(this);
};
$.extend(Overlay.prototype, Mask);
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment