/************************************************************************************************************ * 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: * ************************************************************************************************************/ /** * @constructor */ var mm_refToThisModalBoxObj = ''; DHTML_modalMessage = 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 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 this.url = ''; // Default url is blank this.htmlOfModalMessage = ''; // Default message is blank this.layoutCss = ''; // Default CSS file this.height = 1; // Default height of modal message this.width = 400; // Default width of modal message this.cssClassOfMessageBox = false; // Default alternative css class for the message box } DHTML_modalMessage.prototype = { // {{{ setSource_mm(urlOfSource) /** * Set source of the modal dialog box * * * @public */ setSource_mm : function(urlOfSource) { this.url = urlOfSource; } // }}} , // {{{ setHtmlContent_mm(newHtmlContent) /** * Setting static HTML content for the modal dialog box. * * @param String newHtmlContent = Static HTML content of box * * @public */ setHtmlContent_mm : function(newHtmlContent) { this.htmlOfModalMessage = newHtmlContent; } // }}} , // {{{ setSize_mm(width,height) /** * Set the size of the modal dialog box * * @param int width = width of box * @param int height = height of box * * @public */ setSize_mm : function(width,height) { if(width) this.width = width; if(height) this.height = height; } // }}} , // {{{ setCssClassMessageBox_mm(newCssClass) /** * Assign the message box to a new css class.(in case you wants a different appearance on one of them) * * @param String newCssClass = Name of new css class (Pass false if you want to change back to default) * * @public */ setCssClassMessageBox_mm : function(newCssClass) { this.cssClassOfMessageBox = newCssClass; if(this.divs_content){ if(this.cssClassOfMessageBox) this.divs_content.className=this.cssClassOfMessageBox; else this.divs_content.className='modalDialog_contentDiv'; } } // }}} , // {{{ setShadowOffset_mm(newShadowOffset) /** * Specify the size of shadow * * @param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y) * * @public */ setShadowOffset_mm : function(newShadowOffset) { this.shadowOffset = newShadowOffset } // }}} , // {{{ display_mm() /** * Display the modal dialog box * * * @public */ display_mm : function() { if(!this.divs_transparentDiv){ this.__createDivs_mm(); } hideSelectBoxes(); // Redisplaying divs new Effect.Appear('divs_transparentDiv', { duration: 0, from: 0.0, to: 0.6 }); this.divs_content.style.display='block'; this.__resizeDivs_mm(); /* Call the __resizeDivs_mm method twice in case the css file has changed. The first execution of this method may not catch these changes */ mm_refToThisModalBoxObj = this; setTimeout('mm_refToThisModalBoxObj.__resizeDivs_mm()',150); this.__insertContent_mm(); // Calling method which inserts content into the message div. //this.__resizeDivs_mm(); } // }}} , // {{{ () /** * Display the modal dialog box * * * @public */ setShadowDivVisible_mm : function(visible) { this.shadowDivVisible = visible; } // }}} , // {{{ close_mm() /** * Close the modal dialog box * * * @public */ close_mm : function() { //document.documentElement.style.overflow = ''; // Setting the CSS overflow attribute of the tag back to default. /* Hiding divs */ this.divs_content.innerHTML=''; document.body.removeChild(this.divs_content); document.body.removeChild(this.divs_transparentDiv); this.divs_transparentDiv = ''; this.divs_content = ''; var mm_refToThisModalBoxObj = '' showSelectBoxes(); disp_msg = false; } // }}} , // {{{ __createDivs_mm() /** * Create the divs for the modal dialog box * * * @private */ __createDivs_mm : function() { // Creating transparent div this.divs_transparentDiv = document.createElement('DIV'); this.divs_transparentDiv.id="divs_transparentDiv"; this.divs_transparentDiv.className='modalDialog_transparentDivs'; this.divs_transparentDiv.style.display = 'none'; document.body.appendChild(this.divs_transparentDiv); // Creating content div this.divs_content = document.createElement('DIV'); this.divs_content.className = 'modalDialog_contentDiv'; this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv'; document.body.appendChild(this.divs_content); } // }}} , // {{{ __resizeDivs_mm() /** * Resize the message divs * * * @private */ __resizeDivs_mm : function() { var topOffset = (Math.max(document.body.scrollTop,document.documentElement.scrollTop))+(20); if(this.cssClassOfMessageBox) this.divs_content.className=this.cssClassOfMessageBox; else this.divs_content.className='modalDialog_contentDiv'; if(!this.divs_transparentDiv)return; var arrayPageScroll = getPageScroll(); //arrayPageScroll = new Array(xScroll,yScroll) var arrayPageSize = getPageSize(); //arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) var bodyWidth = arrayPageSize[0]; var bodyHeight = arrayPageSize[1]; var windowWidth = arrayPageSize[2]; var windowHeight = arrayPageSize[3]; var gutsWidth = 0; var gutsHeight = 50; try{ gutsWidth = ($('modal_div_guts').offsetWidth)+(20); gutsHeight = ($('modal_div_guts').offsetHeight)+(10); }catch(err){ } arrayPageSize[1] = arrayPageSize[1]+20; Element.setWidth('divs_transparentDiv', arrayPageSize[0]); Element.setHeight('divs_transparentDiv', arrayPageSize[1]); // Setting width and height of content div if(this.width>0){ var dw = this.width; }else{ if(gutsWidth<(windowWidth*.9)) var dw = gutsWidth; else var dw = (windowWidth*.9); } if(this.height>1) var dh = this.height; else var dh = gutsHeight; this.divs_content.style.width = dw + 'px' this.divs_content.style.height = dh + 'px' this.divs_content.style.left = Math.ceil((windowWidth - this.width) / 2) + 'px' this.divs_content.style.top = topOffset + 'px' var trans_h = (dh+topOffset+20); if(trans_h > arrayPageSize[1]) this.divs_transparentDiv.style.height = trans_h+'px' } // }}} , // {{{ __insertContent_mm() /** * Insert content into the content div * * * @private */ __insertContent_mm : function() { if(this.url){ // url specified - load content dynamically ajax_loadContent('DHTMLSuite_modalBox_contentDiv',this.url); }else{ // no url set, put static content inside the message box this.divs_content.innerHTML = this.htmlOfModalMessage; } } } function check_model_resize() { mm_refToThisModalBoxObj.__resizeDivs_mm(); }