Free javascript Hosting


modal-message.js

Uploaded on Oct 31 2009 12:35 by my_window_in_the_world

/************************************************************************************************************
* 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
*/

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 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;


}

DHTML_modalMessage.prototype = {
// {{{ setSource(urlOfSource)
/**
* Set source of the modal dialog box
*
*
* @public
*/
setSource : function(urlOfSource)
{
this.url = urlOfSource;

}
// }}}
,
// {{{ setHtmlContent(newHtmlContent)
/**
* Setting static HTML content for the modal dialog box.
*
* @param String newHtmlContent = Static HTML content of box
*
* @public
*/
setHtmlContent : function(newHtmlContent)
{
this.htmlOfModalMessage = newHtmlContent;

}
// }}}
,
// {{{ setSize(width,height)
/**
* Set the size of the modal dialog box
*
* @param int width = width of box
* @param int height = height of box
*
* @public
*/
setSize : function(width,height)
{
if(width)this.width = width;
if(height)this.height = height;
}
// }}}
,
// {{{ setCssClassMessageBox(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 : 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(newShadowOffset)
/**
* Specify the size of shadow
*
* @param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
*
* @public
*/
setShadowOffset : function(newShadowOffset)
{
this.shadowOffset = newShadowOffset

}
// }}}
,
// {{{ display()
/**
* Display the modal dialog box
*
*
* @public
*/
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.
}
// }}}
,
// {{{ ()
/**
* Display the modal dialog box
*
*
* @public
*/
setShadowDivVisible : function(visible)
{
this.shadowDivVisible = visible;
}
// }}}
,
// {{{ close()
/**
* Close the modal dialog box
*
*
* @public
*/
close : function()
{
//document.documentElement.style.overflow = ''; // Setting the CSS overflow attribute of the <html> 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';

}
// }}}
,
// {{{ __addEvent()
/**
* Add event
*
*
* @private
*/
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);
}
// }}}
,
// {{{ __createDivs()
/**
* Create the divs for the modal dialog box
*
*
* @private
*/
__createDivs : function()
{
// Creating transparent div
this.divs_transparentDiv = document.createElement('DIV');
this.divs_transparentDiv.className='modalDialog_transparentDivs';
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 = 'modalDialog_contentDiv';
this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv';
this.divs_content.style.zIndex = 100000;

if(this.MSIE){
this.iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
this.iframe.style.zIndex = 90000;
this.iframe.style.position = 'absolute';
document.body.appendChild(this.iframe);
}

document.body.appendChild(this.divs_content);
// Creating shadow div
this.divs_shadow = document.createElement('DIV');
this.divs_shadow.className = 'modalDialog_contentDiv_shadow';
this.divs_shadow.style.zIndex = 95000;
document.body.appendChild(this.divs_shadow);
window.refToModMessage = this;
this.addEvent(window,'scroll',function(e){ window.refToModMessage.__repositionTransparentDiv() });
this.addEvent(window,'resize',function(e){ window.refToModMessage.__repositionTransparentDiv() });


}
// }}}
,
// {{{ __getBrowserSize()
/**
* Get browser size
*
*
* @private
*/
__getBrowserSize : function()
{
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = document.documentElement.clientHeight;

var bodyWidth, bodyHeight;
if (self.innerHeight){ // all except Explorer

bodyWidth = self.innerWidth;
bodyHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
// Explorer 6 Strict Mode
bodyWidth = document.documentElement.clientWidth;
bodyHeight = document.documentElement.clientHeight;
} else if (document.body) {// other Explorers
bodyWidth = document.body.clientWidth;
bodyHeight = document.body.clientHeight;
}
return [bodyWidth,bodyHeight];

}
// }}}
,
// {{{ __resizeDivs()
/**
* Resize the message divs
*
*
* @private
*/
__resizeDivs : function()
{

var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

if(this.cssClassOfMessageBox)
this.divs_content.className=this.cssClassOfMessageBox;
else
this.divs_content.className='modalDialog_contentDiv';

if(!this.divs_transparentDiv)return;

// Preserve scroll position
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

window.scrollTo(sl,st);
setTimeout('window.scrollTo(' + sl + ',' + st + ');',10);

this.__repositionTransparentDiv();


var brSize = this.__getBrowserSize();
var bodyWidth = brSize[0];
var bodyHeight = brSize[1];

// Setting width and height of content div
this.divs_content.style.width = this.width + 'px';
this.divs_content.style.height= this.height + 'px';

// Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
var tmpWidth = this.divs_content.offsetWidth;
var tmpHeight = this.divs_content.offsetHeight;


// Setting width and height of left transparent div






this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + 'px';;
this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) + topOffset) + 'px';

if(this.MSIE){
this.iframe.style.left = this.divs_content.style.left;
this.iframe.style.top = this.divs_content.style.top;
this.iframe.style.width = this.divs_content.style.width;
this.iframe.style.height = this.divs_content.style.height;
}

this.divs_shadow.style.left = (this.divs_content.style.left.replace('px','')/1 + this.shadowOffset) + 'px';
this.divs_shadow.style.top = (this.divs_content.style.top.replace('px','')/1 + this.shadowOffset) + 'px';
this.divs_shadow.style.height = tmpHeight + 'px';
this.divs_shadow.style.width = tmpWidth + 'px';



if(!this.shadowDivVisible)this.divs_shadow.style.display='none'; // Hiding shadow if it has been disabled


}
// }}}
,
// {{{ __insertContent()
/**
* Insert content into the content div
*
*
* @private
*/
__repositionTransparentDiv : function()
{
this.divs_transparentDiv.style.top = Math.max(document.body.scrollTop,document.documentElement.scrollTop) + 'px';
this.divs_transparentDiv.style.left = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) + 'px';
var brSize = this.__getBrowserSize();
var bodyWidth = brSize[0];
var bodyHeight = brSize[1];
this.divs_transparentDiv.style.width = bodyWidth + 'px';
this.divs_transparentDiv.style.height = bodyHeight + 'px';

}
// }}}
,
// {{{ __insertContent()
/**
* Insert content into the content div
*
*
* @private
*/
__insertContent : 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;
}
}
}

Back to list