/* This file provides the Javascript object necessary to create a modal box. CSS IDs: ModalBox_FadeLayer, ModalBox_ContentBlock, ModalBox_Container CSS Classes: Modalbox_Container .footer The ModalBox object has been successfully tested with the following DOCTYPEs: */ var ModalBox = new function() { this.FadePercent = 25; this.FadeColor = '#000000'; this._FadeLayerID = 'ModalBox_FadeLayer'; this._FooterClass = 'footer'; this._ContentBlockID = 'ModalBox_ContentBlock'; this._ModalBoxID = 'ModalBox_Container'; this.IsVisible = function() { return (document.getElementById(this._ModalBoxID)) ? 1 : 0; }; // IsVisible() this.CheckKeyPress = function(e) { var kC = (window.event) ? event.keyCode : e.keyCode; var Esc = (window.event) ? 27 : e.DOM_VK_ESCAPE; if (kC==Esc) { ModalBox.Clear(); } }; // CheckKeyPress(e) this.Show = function() { this.ShowFade(); this.ShowBox(); window.onresize = ModalBox.SetParameters; }; // Show() this.ShowContent = function(source) { this.Show(); this.SetContentBlockText(source.innerHTML); }; // ShowContent(source) this.ShowContentById = function(sId) { var obj = document.getElementById(sId); if(obj) { this.ShowContent(obj); } else { alert('Invalid ID'); } }; // ShowContent(source) this.ShowText = function(text) { this.Show(); this.SetContentBlockText(text); }; // ShowText(text) this.Clear = function() { this.ClearFade(); this.ClearBox(); window.onresize = null; document.onkeypress = null; }; // Clear() this.ShowFade = function() { this.ClearFade(); var wd = General.GetWindowDimensions(); var c = document.createElement('div'); c.setAttribute('id', this._FadeLayerID); if(!General.IsExplorer()) { c.setAttribute('style', "position: absolute; top: 0px; left: 0px; width: 10px; height: 10px; background-color: " + this.FadeColor + "; -khtml-opacity: " + (this.FadePercent/100) + "; -moz-opacity: " + (this.FadePercent/100) + "; opacity: " + (this.FadePercent/100) + ";"); } else { c.style.position = 'absolute'; c.style.top = '0px'; c.style.left = '0px'; c.style.width = '10px'; c.style.height = '10px'; c.style.backgroundColor = this.FadeColor; c.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + this.FadePercent + ')'; c.style.opacity = this.FadePercent; } document.body.appendChild(c); ModalBox.SetFadeDimensions(); }; // ShowFade() this.ClearFade = function() { var d = document.getElementById(this._FadeLayerID); if(d) { document.body.removeChild(d); } }; // ClearFade() this.ShowBox = function() { this.ClearBox(); var objContainer = document.createElement('div'); objContainer.setAttribute('id', this._ModalBoxID); var objContentBlock = document.createElement('div'); objContentBlock.setAttribute('id', this._ContentBlockID); objContainer.appendChild(objContentBlock); var objCaptionBlock = document.createElement('div'); objCaptionBlock.setAttribute('class', this._FooterClass); objCaptionBlock.innerHTML = 'Press ESC to Close'; objContainer.appendChild(objCaptionBlock); document.body.appendChild(objContainer); document.onkeypress = ModalBox.CheckKeyPress; }; // ShowBox() this.ClearBox = function() { var d = document.getElementById(this._ModalBoxID); if(d) { document.body.removeChild(d); } }; // ClearBox() this.SetParameters = function() { ModalBox.SetFadeDimensions(); ModalBox.SetModalPosition(); }; // SetParameters() this.SetFadeDimensions = function() { var obj = document.getElementById(this._FadeLayerID); if(obj) { var wd = General.GetWindowDimensions(); var pw = obj.offsetWidth; var ph = obj.offsetHeight; obj.style.width = (document.body.offsetWidth > wd[0]) ? document.body.offsetWidth + 'px' : wd[0] + 'px'; obj.style.width = (pw > obj.offsetWidth) ? pw + 'px' : obj.offsetWidth + 'px'; obj.style.height = (document.body.offsetHeight > wd[1]) ? document.body.offsetHeight + 'px' : wd[1] + 'px'; obj.style.height = (ph > obj.offsetHeight) ? ph + 'px' : obj.offsetHeight + 'px'; } }; // SetFadeDimensions() this.SetModalPosition = function() { var obj = document.getElementById(this._ModalBoxID); if(obj) { var wd = General.GetWindowDimensions(); var sp = General.GetScrollPositions(); obj.style.top = (sp[1] + (wd[1] / 2)) - (obj.offsetHeight / 2) + 'px'; obj.style.left = (sp[0] + (wd[0] / 2)) - (obj.offsetWidth / 2) + 'px'; //setTimeout("ModalBox.SetModalPosition()", 2000); } }; // SetModalPosition() this.GetContainerBlock = function() { return document.getElementById(this._ModalBoxID); }; // GetContainerBlock() this.GetContentBlock = function() { return document.getElementById(this._ContentBlockID); }; // GetContentBlock() this.SetContentBlockText = function(text) { this.GetContentBlock().innerHTML = text; this.SetModalPosition(); }; // SetContentBlockText(text) };