/*************************************************************************************************** Small library for works with modal windows by YS, 13.12.2007 CSS: .bgFader{position: absolute; background: black; top: 0; left: 0; width: 100%; z-index: 99998; opacity: 0.5; // filter: alpha(opacity=50);} .modalWindow{position: absolute; border: 2px solid black; background: white; color: black; padding: 0px; overflow: auto; z-index: 99999;} Use this class: var oMsgForm = new ModalWindow('msgForm'); if(!oMsgForm.err){ oMsgForm.setContent('ffffuel'); oMsgForm.show(); } ***************************************************************************************************/ //modalAbstract.prototype = new Object(); function ModalAbstract(){ ModalAbstract.prototype.getVisibleArea = function(){ var windowWidth, windowHeight; if(window.innerWidth)// Safari, Opera, FF windowWidth = window.innerWidth; else if(document.documentElement && document.documentElement.clientWidth)// IE windowWidth = document.documentElement.clientWidth; else if(document.body) windowWidth = document.body.offsetWidth; if(window.innerHeight) windowHeight = window.innerHeight; else if(document.documentElement && document.documentElement.clientHeight) windowHeight = document.documentElement.clientHeight; else if(document.body) windowHeight = document.body.clientHeight; return {"width":windowWidth, "height":windowHeight}; } ModalAbstract.prototype.getPageScroll = function(){ /* scrollLeft: The distance between the horizontal scrollbar with the left edge of the frame. scrollTop: The distance between the vertical scrollbar with the top edge of the frame. Get the scroll value from different browsers. Determine the browser type first. And then get the value from the particular property.*/ var scrollLeft, scrollTop; if(window.pageXOffset) scrollLeft = window.pageXOffset else if(document.documentElement && document.documentElement.scrollLeft) scrollLeft = document.documentElement.scrollLeft; else if(document.body) scrollLeft = document.body.scrollLeft; if(window.pageYOffset) scrollTop = window.pageYOffset else if(document.documentElement && document.documentElement.scrollTop) scrollTop = document.documentElement.scrollTop; else if(document.body) scrollTop = document.body.scrollTop; return {"left":scrollLeft, "top":scrollTop}; } ModalAbstract.prototype.getDocumentArea = function(){ var width, height; width = document.documentElement.clientWidth; // FF, Safari, IE if(width < document.body.scrollWidth) // Opera width = document.body.scrollWidth; height = document.documentElement.clientHeight; // FF, Safari, IE if(height < document.body.scrollHeight) // Opera height = document.body.scrollHeight; document.getElementById('debug').innerHTML += '
'+'getDocumentArea.width='+width+' getDocumentArea.height='+height; return {'width':width, 'height':height} } // add event (multybrowsing) ModalAbstract.prototype.addEvent = function(obj, handler, event){ if(window.addEventListener) // Mozilla, Netscape, Firefox obj.addEventListener(event, handler, false); //this.addEvent(o, this.close, 'click'); else {// IE var ev = (event.indexOf('on') == -1?'on':'') + event; obj.attachEvent((ev?ev:event), handler); } } this.browser = (window.addEventListener?'normal':'ie'); } /***************************************************************************************************/ ModalFader.prototype = new ModalAbstract(); function ModalFader(w, h, left, top){ ModalFader.prototype.add = function(){ if(document.getElementById(this.id))// проверко на присутствие фейдера throw('Error. "modalFader" is still present.') if(this.browser == 'ie'){// предотвращаем дерганье в IE при прокрутке (http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/) oBody = document.body; if(!oBody.style.backgroundImage){ oBody.style.background = 'url(/i/px.gif) no-repeat'; oBody.style.backgroundAttachment = 'fixed'; } } var oFader = document.body.insertBefore(document.createElement('div'), document.body.firstChild); this.oFader = oFader; this.oFader.id = this.id; this.oFader.className = 'bgFader'; if(this.browser == 'normal')// фиксим, если не IE this.oFader.style.position = 'fixed'; window.obj = this; this.paint(); this.addEvent(window, function(){ this.obj.paint(); }, 'resize'); if(this.browser == 'ie') this.addEvent(window, function(){ this.obj.paint(); }, 'scroll'); } ModalFader.prototype.paint = function(){ this.oFader.style.top = (this.browser == 'normal'?this.top:eval(document.body.scrollTop))+"px";//эмуляция position: fixed в IE (thx Андрюхе Шитову ;-) this.oFader.style.left = this.left + 'px'; this.oFader.style.width = this.w; this.oFader.style.height = this.h; } this.id = 'modalFader'; this.w = (w !== undefined?w+'px':'100%'); this.h = (h !== undefined?h+'px':'100%'); this.top = (top !== undefined?top:0); this.left = (left !== undefined?left:0); } /***************************************************************************************************/ ModalWindow2.prototype = new ModalAbstract(); function ModalWindow2(id, w, h, left, top){ this.id = 'modalWindow';// id - для совместимости с старым кодом, да и мало ли, мож понадобится ;) var visibleArea = this.getVisibleArea(); this.w = (w !== undefined?w:Math.ceil(visibleArea.width - (visibleArea.width * 20 / 100)))+'px'; this.h = (h !== undefined?h:Math.ceil(visibleArea.height - (visibleArea.height * 20 / 100)))+'px'; this.top = (top !== undefined?top:0); this.left = (left !== undefined?left:0); } /***************************************************************************************************/ ModalWindow.prototype = new ModalAbstract(); function ModalWindow(id, w, h, left, top){ ModalWindow.prototype.calcPositon = function(){ var tmp; tmp = this.getPageScroll(); this.scrollLeft = tmp.left; this.scrollTop = tmp.top; tmp = this.getVisibleArea(); this.windowWidth = tmp.width; this.windowHeight = tmp.height; this.documentHeight = document.documentElement.clientHeight; // FF, Safari, IE if(this.documentHeight < document.body.scrollHeight) // Opera this.documentHeight = document.body.scrollHeight; this.left = (this.left != undefined?this.left:this.windowWidth/2 - this.w/2); this.top = (this.top != undefined?this.top:this.windowHeight/2 - this.h/2) + this.scrollTop; } ModalWindow.prototype.setContent = function(cnt){ this.cnt = cnt; } ModalWindow.prototype.getCustomModalObject = function(){ return this.oCustomModal; } ModalWindow.prototype.getModalObject = function(){ return this.oModalWindow; } ModalWindow.prototype.getFaderObject = function(){ return this.oBgFader; } ModalWindow.prototype.addClose = function(o){ this.addEvent(o, this.close, 'click'); } ModalWindow.prototype.showFader = function(){ var oBgFader = document.body.insertBefore(document.createElement('div'), document.body.firstChild); this.oBgFader = oBgFader; this.oBgFader.id = 'bgFader_'+this.id; this.oBgFader.className = 'bgFader'; //this.oBgFader.style.border = '1px solid red'; this.oBgFader.style.top = '0'; this.oBgFader.style.height = this.documentHeight + 'px'; if(id != 'noFclose') this.addClose(this.oBgFader);// click out of window - closest modal window } ModalWindow.prototype.showModal = function(){ // begin create modal window this.oModalWindow = document.body.insertBefore(document.createElement('div'), document.body.firstChild); this.oModalWindow.id = 'modalWindow_'+this.id; this.oModalWindow.className = 'modalWindow'; this.oModalWindow.style.width = this.w + 'px'; this.oModalWindow.style.height = this.h + 'px'; this.positioning(); this.oModalWindow.innerHTML = this.cnt; // end create modal window } ModalWindow.prototype.addCustomModal = function(o){ this.oCustomModal = document.body.insertBefore(o, document.body.firstChild); return this.oCustomModal; } // show modal window ModalWindow.prototype.show = function(){ this.showFader(); this.showModal(); //this.addEvent(window, this.zz(this), 'scroll'); } // set position for modal window ModalWindow.prototype.positioning = function(){ this.oModalWindow.style.left = this.left + 'px'; this.oModalWindow.style.top = this.top + 'px'; } // close modal window ModalWindow.prototype.close = function(){ document.body.removeChild(document.body.firstChild.nextSibling); document.body.removeChild(document.body.firstChild); } // constructor ***************************************************** this.w = (w != undefined?w:'1000'); this.h = (h != undefined?h:'200'); this.left = left; this.top = top; this.calcPositon(); this.err = false; if(document.getElementById('modalWindow'+id) !== null) this.err = true; this.id = id; }