/************************************************************************************************************ * DHTML modal dialog box * * Created: August, 26th, 2006 * @class Purpose of class: Display a modal dialog box on the screen. * * Css files used by this script: modal-message.css * * Demos of this class: demo-modal-message-1.html * * Update log: * ************************************************************************************************************/ CSMessage = function(){ var url; // url of modal message var htmlOfModalMessage; // html of modal message var divs_transparentDiv; // Transparent div covering page content var divs_content; // Modal message div. var iframe; // Iframe used in ie var layoutCss; // Name of css file; var width; // Width of message box var height; // Height of message box var existingBodyOverFlowStyle; // Existing body overflow css var dynContentObj; // Reference to dynamic content object var cssClassOfMessageBox; // Alternative css class of message box - in case you want a different appearance on one of them var shadowDivVisible; // Shadow div visible ? var shadowOffset; // X and Y offset of shadow(pixels from content box) var MSIE; this.url = ''; // Default url is blank this.htmlOfModalMessage = ''; // Default message is blank this.layoutCss = 'modal-message.css'; // Default CSS file this.height = 200; // Default height of modal message this.width = 400; // Default width of modal message this.cssClassOfMessageBox = false; // Default alternative css class for the message box this.shadowDivVisible = true; // Shadow div is visible by default this.shadowOffset = 5; // Default shadow offset. this.MSIE = false; if(navigator.userAgent.indexOf('MSIE')>=0) this.MSIE = true; this.setSource = function(urlOfSource){ this.url = urlOfSource; } this.setHtmlContent = function(newHtmlContent){ this.htmlOfModalMessage = newHtmlContent; } this.setSize = function(width,height){ if(width)this.width = width; if(height)this.height = height; } this.setCssClassMessageBox = function(newCssClass){ this.cssClassOfMessageBox = newCssClass; if(this.divs_content){ if(this.cssClassOfMessageBox) this.divs_content.className=this.cssClassOfMessageBox; else this.divs_content.className='cs_object_content_div'; } } this.setShadowOffset = function(newShadowOffset){ this.shadowOffset = newShadowOffset } this.display = function(){ if(!this.divs_transparentDiv){ this.__createDivs(); } // Redisplaying divs this.divs_transparentDiv.style.display='block'; this.divs_content.style.display='block'; this.divs_shadow.style.display='block'; if(this.MSIE)this.iframe.style.display='block'; this.__resizeDivs(); /* Call the __resizeDivs method twice in case the css file has changed. The first execution of this method may not catch these changes */ window.refToThisModalBoxObj = this; setTimeout('window.refToThisModalBoxObj.__resizeDivs()',150); this.__insertContent(); // Calling method which inserts content into the message div. } this.setShadowDivVisible = function(visible){ this.shadowDivVisible = visible; } this.close = function(){ //document.documentElement.style.overflow = ''; // Setting the CSS overflow attribute of the tag back to default. /* Hiding divs */ this.divs_transparentDiv.style.display='none'; this.divs_content.style.display='none'; this.divs_shadow.style.display='none'; if(this.MSIE)this.iframe.style.display='none'; } this.addEvent = function(whichObject,eventType,functionName,suffix){ if(!suffix)suffix = ''; if(whichObject.attachEvent){ whichObject['e'+eventType+functionName+suffix] = functionName; whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );} whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] ); } else whichObject.addEventListener(eventType,functionName,false); } this.__createDivs = function(){ // Creating transparent div this.divs_transparentDiv = document.createElement('DIV'); this.divs_transparentDiv.className='cs_object_transparent_divs'; this.divs_transparentDiv.style.left = '0px'; this.divs_transparentDiv.style.top = '0px'; document.body.appendChild(this.divs_transparentDiv); // Creating content div this.divs_content = document.createElement('DIV'); this.divs_content.className = 'cs_object_content_div'; this.divs_content.id = 'cs_object_content_div'; this.divs_content.style.zIndex = 100000; if(this.MSIE){ this.iframe = document.createElement('