/************************************************************** Script : Overlay Version : 1.2 Authors : Samuel birch Desc : Covers the window with a semi-transparent layer. Licence : Open Source MIT Licence **************************************************************/ var Overlay = new Class({ getOptions: function(){ return { colour: '#000', opacity: 0.7, zIndex: 1, target: document.body, container: document.body, msg: null, onClick: null //Class.empty }; }, initialize: function(options){ this.setOptions(this.getOptions(), options); this.options.container = $(this.options.container); this.options.target = $(this.options.target); this.options.msg = $(this.options.msg); this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({ position: 'absolute', left: '0px', top: '0px', width: '100%', zIndex: this.options.zIndex }).injectInside(this.options.container); this.overlayBackground = new Element('div').setProperty('id', 'overlayBackground').setStyles({ position: 'absolute', left: '0px', top: '0px', width: '100%', height: '100%', zIndex: 1 }).injectInside(this.container); this.iframe = new Element('iframe').setProperties({ 'id': 'OverlayIframe', 'name': 'OverlayIframe', 'src': 'javascript:\'\'', 'frameborder': 0, 'scrolling': 'no' }).setStyles({ 'position': 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%', 'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)', 'opacity': 0, 'zIndex': 1 }).injectInside(this.overlayBackground); this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({ position: 'absolute', left: '0px', top: '0px', width: '100%', height: '100%', zIndex: 2, backgroundColor: this.options.colour }).injectInside(this.overlayBackground); this.msgContainer = new Element('div').setProperty('id', 'OverlayMsgContainer').setStyles({ position: 'absolute', left: '50%', top: '50%', width: '1px', height: '1px', zIndex: 3, overflow: 'visible' }).injectInside(this.container); var wi=this.options.msg.getStyle('width').toInt()+this.options.msg.getStyle('padding-left').toInt()+this.options.msg.getStyle('padding-right').toInt(); var he=this.options.msg.getStyle('height').toInt()+this.options.msg.getStyle('padding-top').toInt()+this.options.msg.getStyle('padding-bottom').toInt(); this.msg = new Element('div').setProperty('id', 'OverlayMsg').setStyles({ position: 'absolute', left: '-' + wi/2 + 'px', top: '-' + he/2 + 'px', width: this.options.msg.getStyle('width'), height: this.options.msg.getStyle('height'), zIndex: 4 }).injectInside(this.msgContainer).addClass('box-note').setHTML(this.options.msg.innerHTML); this.container.addEvent('click', function(){ if (this.options.onClick) this.options.onClick(); else this.hide(); }.bind(this)); this.container.setOpacity(0); this.fade = new Fx.Style(this.overlayBackground, 'opacity').set(0); this.fadeMsg = new Fx.Style(this.msgContainer, 'opacity').set(0); this.position(); window.addEvent('resize', this.position.bind(this)); }, position: function(){ if(this.options.target == document.body){ var h = window.getScrollHeight()+'px'; this.container.setStyles({top: '0px', height: h}); }else{ var myCoords = this.options.target.getCoordinates(); this.container.setStyles({ top: myCoords.top+'px', height: myCoords.height+'px', left: myCoords.left+'px', width: myCoords.width+'px' }); } }, show: function(){ this.container.setOpacity(1); this.fade.start(this.overlayBackground.getStyle('opacity'),this.options.opacity); this.fadeMsg.start(this.msgContainer.getStyle('opacity'),1); }, hide: function(){ this.fade.start(this.overlayBackground.getStyle('opacity'),0).chain(function(){ this.container.setOpacity(0); }.bind(this)); this.fadeMsg.start(this.msgContainer.getStyle('opacity'),0); } }); Overlay.implement(new Options); /*************************************************************/