var Modalbox = new Class({ options:{ width: 300, height: 100, position: { 'screen':{ 'x':'center', 'y':'center' } }, title:'', showtitle:true, closetext:'Close', top: 0, left: 0, zindex: null, modalpadding:10, adopt:null, adoptclone:null, ismodal:false, draggable:true, fadein:true, fadeout:true, blanketcolor:'#000', blanketopacity:0.4, shadowcolor: '#000000', shadowwidth:10, bgcolor:'#ffffff', ajaxcontent:null, defaultfocus:null, internallinks:false, executeScripts:false, onOpen: Class.empty, onClose: Class.empty, onBeforeClose: Class.empty, onAdopt: Class.empty, onBeforeAdopt: Class.empty, onSetContents: Class.empty, onBeforeSetContents: Class.empty, onAdoptClone: Class.empty, onBeforeAdoptClone: Class.empty, onBeforeDrag: Class.empty, onStartDrag: Class.empty, onDrag: Class.empty, onDragComplete: Class.empty }, initialize:function(options){ var self = this; this.setOptions(options); this.randguid = Math.floor(Math.random() * 1000000000); // create the popup container, if it doesn't exist. This is an invisible div at the beginning of the if(!$('mymodalcontainer')){ this.mymodalcontainer = new Element('div',{'id':'mymodalcontainer'}); this.mymodalcontainer.inject(document.body,'top'); }else{ this.mymodalcontainer = $('mymodalcontainer'); } /* create the main modal element */ this.mymodal = new Element('div',{'id':this.randguid + 'mymodal','class':'modalcontainer'}); this.mymodal.inject(this.mymodalcontainer,'top'); if(this.options.zindex){ this.mymodal.setStyle('z-index',this.options.zindex); } // The popup element holds an object reference to the modalbox object itself. This gives content the ability to execute methods of the object like "close()" this.mymodal.modalobj = this; /* create the "front" element, so called because it is in front of the shadow */ this.mymodalfront = new Element('div',{'id':this.randguid + 'mymodalfront','class':'modalfront'}); if(this.options.width){ this.mymodalfront.setStyle('width',this.options.width); } this.mymodalfront.setStyle('opacity',0); this.mymodalfront.inject(this.mymodal,'top'); /* create the "shadow" element */ this.mymodalshad = new Element('div',{'id':this.randguid + 'mymodalshad','class':'modalshadow'}); this.mymodalshad.inject(this.mymodal,'top'); this.mymodalshad.setStyle('opacity',0); if(this.options.shadowcolor){this.mymodalshad.setStyle('background-color',this.options.shadowcolor);} /* create the "title" element */ if(this.options.showtitle){ this.titlepart = new Element('div',{'id':this.randguid + 'titlepart','class':'modaltitle'}); /* create the "close" element */ /* create the "title message" element */ this.titlemessage = new Element('h1',{'id':this.randguid + 'titlemessage','class':'heading2'}); this.titlemessage.injectInside(this.titlepart); this.titlemessagespan = new Element('span',{'id':this.randguid + 'title'}).set('html',this.options.title); this.titlemessagespan.injectInside(this.titlemessage); this.closebuttonspan = new Element('span',{'class':'meta'}); this.closebuttonspan.injectInside(this.titlemessage); this.closebutton = new Element('a',{'id':this.randguid + 'closebutton','class':'closebutton'}).set('html',this.options.closetext); this.closebutton.injectInside(this.closebuttonspan); this.titlepart.injectInside(this.mymodalfront); this.closebutton.mymodaltarget = this; this.closebutton.onclick=function(){ this.mymodaltarget.close(); return false; } } /* create the "body" element */ this.bodypart = new Element('div',{'id':this.randguid + 'bodypart','class':'modalbody'}); this.bodypart.setStyle('background-color',this.options.bgcolor); this.bodypart.inject(this.mymodalfront,'bottom'); if(typeof(this.options.modalpadding)!='undefined'){ //this.bodypart.setStyle('margin',this.options.modalpadding + 'px'); //this.bodypart.setStyle('padding',this.options.modalpadding + 'px'); } if(this.options.ismodal){ if($('blanket')){ // there already is a blanket. no need to create another. var blanket = $('blanket'); // a blanket exists if(blanket.boxes){ blanket.boxes.push(this.randguid); } }else{ var blanket = new Element('div',{'id':'blanket','class':'modalblanket'}); /* set the blanket opacity to 0 */ blanket.setStyle('opacity',0); /* set the blanket color */ if(this.options.blanketcolor){blanket.setStyle('background-color',this.options.blanketcolor);} /* inject the blanket*/ blanket.inject(this.mymodalcontainer,'top'); // set up an array, so the blanket knows how many boxes are keeping it "on". blanket.boxes = Array(); blanket.boxes.push(this.randguid); if(this.options.fadein){ var fadefxblanket = new Fx.Tween(blanket, {duration:200}); fadefxblanket.start('opacity',this.options.blanketopacity); /* ie6 fix */ blanket.setStyles({'height':screen.height}); }else{ blanket.setStyle('opacity',1); } } // iframe shimming for IE6 select boxes showing through layers if(Browser.Engine.name == 'trident' && Browser.Engine.version < 7){ this.iframeshim = new Element('iframe',{'src':'javascript:;','frameborder':'0','scrolling':'0'}); this.iframeshim.setStyles({'z-index':'500','position':'absolute','left':'0','top':'0','width':'100%','filter':'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)','height':screen.height}); this.iframeshim.inject(this.mymodalcontainer,'top'); } } if(this.options.fadein){ var fadefxfront = new Fx.Tween(this.mymodalfront, {duration:200}); var fadefxshad = new Fx.Tween(this.mymodalshad, {duration:200}); fadefxshad.obj = this; fadefxfront.start('opacity',1); fadefxshad.start('opacity',0.5).chain(function(){ if(this.obj.options.defaultfocus){ if(this.obj.bodypart.getElement(this.obj.options.defaultfocus)){ this.obj.bodypart.getElement(this.obj.options.defaultfocus).select(); } } }); }else{ this.mymodalfront.setStyle('opacity',1); this.mymodalshad.setStyle('opacity',this.options.blanketopacity); } /* draggable */ if(this.options.draggable){ // if there is a title part, it is the handle if(this.options.showtitle){ this.mymodal.makeDraggable({'handle':this.titlepart}); this.titlepart.setStyle('cursor','move'); }else{ this.mymodal.makeDraggable({'handle':this.mymodal}); this.mymodal.setStyle('cursor','move'); } } if(this.options.adoptclone){ this.adoptclone(this.options.adoptclone); } if(this.options.adopt){ this.adopt(this.options.adopt); } if(this.options.ajaxcontent){ this.ajaxcontent(this.options.ajaxcontent); } this.adjustposition(); window.thismodal = this; /* var mymodalkeycap = window.addEvent('keyup',function(e){ if(e.keyCode==27){ window.thismodal.close(); } }); */ this.fireEvent('onOpen'); }, close: function(){ /* to fix : there is a bug that happens if the user retriggers a modalbox to open while a previous modalbox is fading out. Since the adopted content isn't moved until the fade is done, The content hasn't been moved yet so you get a modalbox with no content in it. Same thing would happen if you had two modal triggers adopting the same content. */ /* another task: what happens if you're closing a modalbox but the element that triggered it has been removed? */ // remove iframe shimming if(Browser.Engine.name == 'trident' && Browser.Engine.version < 7 && this.iframeshim){ this.iframeshim.dispose(); } this.fireEvent('onBeforeClose'); // see if we should be removing the blanket var killblanket = false; if($('blanket')){ var blanket = $('blanket'); if(blanket.boxes){ // remove this guid from the array for(var i=0;i links in the content so they open in this modalbox var alllinks = this.bodypart.getElements('a'); alllinks.each(function(l){ l.addEvent('click',function(){ var u = l.get('href'); self.ajaxcontent(u); return false; }) }); } this.adjustposition(); this.fireEvent('setContents'); }, adopt:function(elem){ this.isclone = false; elem.removeClass('hide'); this.fireEvent('onBeforeAdopt'); /* var w = this.bodypart.getSize()['size']['x']; var h = this.bodypart.getSize()['size']['y']; */ this.bodypart.empty(); this.bodypart.adopt(elem); /* this.bodypart.setStyles({ 'width':w, 'height':h - 24 }); */ this.adjustposition(); this.fireEvent('onAdopt'); }, adoptclone:function(elem){ this.isclone = true; this.fireEvent('onBeforeAdoptClone'); var inic = elem; // clone the adopt node, with events attached var clone = inic.clone(); clone.removeClass('hide'); if(inic.id){ clone.id = this.randguid + inic.id; } var ein = inic.getElementsByTagName('*'); var eout = clone.getElementsByTagName('*'); for(var i=0;i containerbounds['height']){ this.mymodalfront.setStyle('height',containerbounds['height']-this.options.shadowwidth*2); this.bodypart.setStyle('height',containerbounds['height']-this.options.shadowwidth*2 - this.titlepart.getSize()['y'] - this.options.modalpadding*2); this.bodypart.setStyle('overflow','auto'); }else{ this.mymodal.setStyle('height',modalheight); } } if(this.options.position.align){ var alignelement = this.options.position.align.element; var alignelementbounds = alignelement.getCoordinates(); // this is a really dumbed-down attempt which will later be replaced by some more robust alignment options // try NENW this.mymodal.setStyle('position','absolute'); this.mymodal.setStyle('width',( this.mymodalfront.getSize()['x'] + this.options.shadowwidth) ); this.mymodal.setStyle('height',( this.mymodalfront.getSize()['y'] + this.options.shadowwidth) ); var popupsize = this.mymodal.getCoordinates(); //alert('popup is '+popupsize['width']+'x'+popupsize['height']); //alert('container is '+containerbounds['width']+'x'+containerbounds['height']+'\ntop:'+containerbounds['top']+'\nleft:'+containerbounds['left']+'\nright:'+containerbounds['right']+'\nbottom:'+containerbounds['bottom']); //alert('alignelement is '+alignelementbounds['width']+'x'+alignelementbounds['height']+'\ntop:'+alignelementbounds['top']+'\nleft:'+alignelementbounds['left']+'\nright:'+alignelementbounds['right']+'\nbottom:'+alignelementbounds['bottom']); if(popupsize['width'] > (containerbounds['width'] - alignelementbounds['right'])){ //alert('no FIT on right side.'); //alert(popupsize['width'] +' > '+ containerbounds['width'] +' - '+ alignelementbounds['right'] + ' = ' + (containerbounds['width'] - alignelementbounds['right'])); if(popupsize['height'] > (containerbounds['height'] - (alignelementbounds['bottom'] - Window.getScrollTop()))){ //alert('no FIT bottom'); //alert(popupsize['height'] +' > '+ containerbounds['height'] +' - '+ alignelementbounds['bottom'] + ' = ' + (containerbounds['height'] - alignelementbounds['bottom'])); //alert('doing SWSE'); this.mymodal.setStyle('left', alignelementbounds['left'] - popupsize['width'] + this.options.shadowwidth); this.mymodal.setStyle('top', alignelementbounds['bottom'] - popupsize['height'] + this.options.shadowwidth); }else{ //alert('FIT bottom'); //alert(popupsize['height'] +' > '+ containerbounds['height'] +' - '+ alignelementbounds['bottom']); //alert('doing SENE'); this.mymodal.setStyle('left', alignelementbounds['left'] - popupsize['width'] + this.options.shadowwidth); this.mymodal.setStyle('top', alignelementbounds['top'] + this.options.shadowwidth); } }else{ //alert('FIT on right side.'); //alert(popupsize['width'] +' > '+ containerbounds['width'] +' - '+ alignelementbounds['right'] + ' = ' + (containerbounds['width'] - alignelementbounds['right'])); if(popupsize['height'] > (containerbounds['height'] - (alignelementbounds['top'] - Window.getScrollTop()))){ //alert('no FIT bottom'); //alert(popupsize['height'] +' > '+ containerbounds['height'] +' - '+ alignelementbounds['top'] + ' = ' + (containerbounds['height'] - alignelementbounds['top'])); //alert('doing SESW'); this.mymodal.setStyle('left', alignelementbounds['right'] + this.options.shadowwidth); this.mymodal.setStyle('top', alignelementbounds['bottom'] - popupsize['height']); }else{ //alert('FIT bottom'); //alert(popupsize['height'] +' > '+ containerbounds['height'] +' - '+ alignelementbounds['top'] + ' = ' + (containerbounds['height'] - alignelementbounds['top'])); //alert('doing NENW'); this.mymodal.setStyle('left', alignelementbounds['right'] + this.options.shadowwidth); this.mymodal.setStyle('top', alignelementbounds['top'] + this.options.shadowwidth); } } } // set the shadow size this.mymodalshad.setStyle('width',( this.mymodalfront.getSize()['x']) + (this.options.shadowwidth * 2) ); this.mymodalshad.setStyle('height',( this.mymodalfront.getSize()['y']) + (this.options.shadowwidth * 2) ); this.mymodalshad.setStyle('top',(this.options.shadowwidth * -1)); this.mymodalshad.setStyle('left',(this.options.shadowwidth * -1)); } }); Modalbox.implement(new Events, new Options);