JavaScript实现弹出式窗口的功能

以下是js代码：HC_Modal.js
HC_Modal = new Object();
HC_Modal._variableName = 'HC_Modal';
HC_Modal.LoadingHtmlUrl = null;
HC_Modal.WindowCssClasses = new Array();
HC_Modal.WindowTitleCssClasses = new Array();
HC_Modal.WindowCloseCssClasses = new Array();
HC_Modal.WindowContentCssClasses = new Array();
HC_Modal.WindowMaskCssClasses = new Array();
HC_Modal.WindowFooterCssClasses = new Array();
HC_Modal.WindowResizeCssClasses = new Array();
HC_Modal.ZIndex = 100;
HC_Modal._isShown = false;
HC_Modal._initialized = false;
HC_Modal._modal = null;
HC_Modal._modalTitle = null;
HC_Modal._modalClose = null;
HC_Modal._modalAnimationMask = null;
HC_Modal._modalMask = null;
HC_Modal._modalIframe = null;
HC_Modal._modalResize = null;
HC_Modal._modalFooter = null;
HC_Modal._modalContent = null;
HC_Modal._animationHandle = null;
HC_Modal._isOpening = false;
HC_Modal._hiddenSelects = null;
HC_Modal._checkForScrollResizeHandle = null;
HC_Modal._lastModalInfo = null;
HC_Modal._lastWindowInfo = null;
HC_Modal._isDragging = false;
HC_Modal._moveModalInfo = null;
HC_Modal._resizeModalInfo = null;
HC_Modal._isResizing = false;

HC_Modal.Configure = function(loadingHtmlUrl, windowCssClasses, windowTitleCssClasses, windowCloseCssClasses, windowContentCssClasses, windowFooterCssClasses, windowResizeCssClasses, windowMaskCssClasses, zIndex)
{
this.LoadingHtmlUrl = loadingHtmlUrl;
this.WindowCssClasses = windowCssClasses;
this.WindowTitleCssClasses = windowTitleCssClasses;
this.WindowCloseCssClasses = windowCloseCssClasses;
this.WindowContentCssClasses = windowContentCssClasses;
this.WindowMaskCssClasses = windowMaskCssClasses;
this.WindowFooterCssClasses = windowFooterCssClasses;
this.WindowResizeCssClasses = windowResizeCssClasses;
this.ZIndex = zIndex;
}

HC_Modal.IsShown = function()
{
return this._isShown;
}

HC_Modal._getWindowInfo = function()
{
var scrollX = 0, scrollY = 0, width = 0, height = 0, contentWidth = 0, contentHeight = 0;

if (typeof(window.pageXOffset) == 'number')
{
//Netscape compliant
scrollX = window.pageXOffset;
scrollY = window.pageYOffset;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
//DOM compliant
scrollX = document.body.scrollLeft;
scrollY = document.body.scrollTop;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
//IE6 standards compliant mode
scrollX = document.documentElement.scrollLeft;
scrollY = document.documentElement.scrollTop;
}

if (typeof(window.innerWidth) == 'number')
{
//Non-IE
width = window.innerWidth;
height = window.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
{
//IE 6+ in 'standards compliant mode'
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body && (document.body.clientWidth || document.body.clientHeight))
{
//IE 4 compatible
width = document.body.clientWidth;
height = document.body.clientHeight;
}

if (document.documentElement && (document.documentElement.scrollHeight || document.documentElement.offsetHeight))
{
if (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
{
contentWidth = document.documentElement.scrollWidth;
contentHeight = document.documentElement.scrollHeight;
}
else
{
contentWidth = document.documentElement.offsetWidth;
contentHeight = document.documentElement.offsetHeight;
}
}
else if (document.body && (document.body.scrollHeight || document.body.offsetHeight))
{
if (document.body.scrollHeight > document.body.offsetHeight)
{
contentWidth = document.body.scrollWidth;
contentHeight = document.body.scrollHeight;
}
else
{
contentWidth = document.body.offsetWidth;
contentHeight = document.body.offsetHeight;
}
}
else
{
contentWidth = width;
contentHeight = height;
}

if (height > contentHeight)
height = contentHeight;

if (width > contentWidth)
width = contentWidth;

var rect = new Object();
rect.ScrollX = scrollX;
rect.ScrollY = scrollY;
rect.Width = width;
rect.Height = height;
rect.ContentWidth = contentWidth;
rect.ContentHeight = contentHeight;

return rect;
}

HC_Modal._getCurrentStyleValue = function(element, styleRule, jsStyleRule)
{
var value = 0;

if(document.defaultView && document.defaultView.getComputedStyle)
value = parseInt(document.defaultView.getComputedStyle(element, "").getPropertyValue(styleRule), 0);
else if(element.currentStyle)
value = parseInt(element.currentStyle[jsStyleRule], 0);

if (!isNaN(value))
return value;
else
return 0;
}

HC_Modal._calculateStyleOffset = function(element)
{
var result = new Object();

result.Height = this._getCurrentStyleValue(element, 'border-top-width', 'borderTopWidth') +
this._getCurrentStyleValue(element, 'border-bottom-width', 'borderBottomWidth') +
this._getCurrentStyleValue(element, 'padding-top', 'paddingTop') +
this._getCurrentStyleValue(element, 'padding-bottom', 'paddingBottom');

result.Width = this._getCurrentStyleValue(element, 'border-left-width', 'borderLeftWidth') +
this._getCurrentStyleValue(element, 'border-right-width', 'borderRightWidth') +
this._getCurrentStyleValue(element, 'padding-left', 'paddingLeft') +
this._getCurrentStyleValue(element, 'padding-right', 'paddingRight');

return result;
}

HC_Modal.Open = function (url, width, height, onCloseFunction, x, y, ignoreCloseAndAnimation)
{
if (!ignoreCloseAndAnimation && this._isShown)
this.Close();
else if (this._hiddenSelects)
{
for (var i = 0; i < this._hiddenSelects.length; i++)
{
if (this._hiddenSelects[i].Element.style.visibility == 'hidden')
this._hiddenSelects[i].Element.style.visibility = this._hiddenSelects[i].Visibility;
}

this._hiddenSelects = null;
}

if (!this._initialized)
this._initialize();

try
{
this._modalTitle.childNodes[1].innerHTML = '<font color=black>' + this._modalIframe.contentWindow.document.title + '</font>';
}
catch (err)
{
}

if (!ignoreCloseAndAnimation)
this._modalIframe.src = url;

try
{
this._modalIframe.contentWindow.opener = window;
}
catch (err)
{
}

this._modalAnimationMask.style.display = 'none';
this._modalMask.style.display = 'none';

// retrieve the window info
this._lastWindowInfo = this._getWindowInfo();

this._modalAnimationMask.style.display = 'block';

// width/height of panel
if (width > this._lastWindowInfo.Width)
width = this._lastWindowInfo.Width;

this._modalAnimationMask.style.position = 'absolute';
this._modalAnimationMask.style.zIndex = this.ZIndex;
this._modalAnimationMask.style.display = 'block';
this._modalAnimationMask.style.visibility = 'hidden';
this._modalAnimationMask.style.overflow = 'hidden';

this._modalAnimationMask.style.width = width + 'px';
this._modalContent.style.width = width + 'px';

this._modal.style.position = 'absolute';
this._modal.style.display = 'block';
this._modal.style.visibility = 'hidden';
this._modal.style.left = '0px';
this._modal.style.top = '0px';

this._modalMask.style.position = 'absolute';
this._modalMask.style.display = 'block';
this._modalMask.style.zIndex = this.ZIndex;
this._modalMask.style.visibility = 'visible';

var modalContentOffset = this._calculateStyleOffset(this._modalContent);

var offset = (this._modal.offsetHeight - this._modalContent.offsetHeight) - modalContentOffset.Height;
if (height + offset > this._lastWindowInfo.Height)
height = this._lastWindowInfo.Height - offset;

if (width < this._modalResize.offsetWidth * 2)
width = this._modalResize.offsetWidth * 2;

if (width < this._modalClose.offsetWidth * 2)
width = this._modalClose.offsetWidth * 2;

if (height < this._modalTitle.offsetHeight + this._modalFooter.offsetHeight)
height = this._modalTitle.offsetHeight + this._modalFooter.offsetHeight;

this._modalIframe.style.height = height + 'px';
this._modalContent.style.height = height + 'px';
this._modalContent.style.width = (width - (this._modal.offsetWidth - this._modalContent.offsetWidth) - modalContentOffset.Width) + 'px';
this._modalAnimationMask.style.width = width + 'px';
this._modalAnimationMask.style.height = this._modal.offsetHeight + 'px';

this._modalMask.style.left = '0px';
this._modalMask.style.top = '0px';
this._modalMask.style.width = this._lastWindowInfo.ContentWidth + 'px';
this._modalMask.style.height = this._lastWindowInfo.ContentHeight + 'px';

this._lastWindowInfo = this._getWindowInfo();

var panelWidth = this._modal.offsetWidth;
var panelHeight = this._modal.offsetHeight;
var animatePropertyName, animateTargetValue, animateNextValue;

if (typeof(x) == 'undefined' || isNaN(parseInt(x, 10)))
x = ((this._lastWindowInfo.Width - panelWidth) / 2) + this._lastWindowInfo.ScrollX;

if (x + panelWidth > this._lastWindowInfo.Width + this._lastWindowInfo.ScrollX)
x = this._lastWindowInfo.Width + this._lastWindowInfo.ScrollX - panelWidth;

if (x < this._lastWindowInfo.ScrollX)
x = this._lastWindowInfo.ScrollX;

if (typeof(y) == 'undefined' || isNaN(parseInt(y, 10)))
y = ((this._lastWindowInfo.Height - panelHeight) / 2) + this._lastWindowInfo.ScrollY;

if (y + panelHeight > this._lastWindowInfo.Height + this._lastWindowInfo.ScrollY)
y = this._lastWindowInfo.Height + this._lastWindowInfo.ScrollY - panelHeight;

if (y < this._lastWindowInfo.ScrollY)
y = this._lastWindowInfo.ScrollY;

this._modalAnimationMask.style.left = x + 'px';
this._modalAnimationMask.style.top = y + 'px';

animateTargetValue = 0;
animateNextValue = -panelHeight;

this._modal.style.visibility = 'visible';
this._modalAnimationMask.style.visibility = 'visible';
this._modalAnimationMask.style.overflow = 'hidden';

// detect and hide select boxes
if (this._modalAnimationMask.getClientRects)
{
var selectBoxes = document.getElementsByTagName('select');
this._hiddenSelects = new Array();
for (var i = 0; i < selectBoxes.length; i++)
{
this._hiddenSelects[this._hiddenSelects.length] = { Element: selectBoxes[i], Visibility: selectBoxes[i].style.visibility };
selectBoxes[i].style.visibility = 'hidden';
}
}

this._isOpening = true;
if (ignoreCloseAndAnimation)
this._animationHandle = window.setTimeout(new Function(this._variableName + '._animate(0,0,0,0);'), 9);
else
{
this._modalIframe.style.display = 'none';
this._animate(0, -panelHeight, panelHeight / 3, .67);
}

this._lastModalInfo = { Url : this._modalIframe.src, OnCloseFunction : onCloseFunction, X : x, Y : y, Width : parseInt(width, 10), Height: parseInt(height, 10) };
this._isShown = true;
}

HC_Modal._checkForScrollResize = function()
{
if (this._checkForScrollResizeHandle)
window.clearTimeout(this._checkForScrollResizeHandle);

if (this._isShown && !this._isOpening && this._lastWindowInfo)
{
try
{
this._modalTitle.childNodes[1].innerHTML = '<font color=black>' + this._modalIframe.contentWindow.document.title+ '</font>';
}
catch (err)
{
}

var windowInfo = this._getWindowInfo();
if (windowInfo.ScrollX != this._lastWindowInfo.ScrollX || windowInfo.ScrollY != this._lastWindowInfo.ScrollY || windowInfo.Width != this._lastWindowInfo.Width || windowInfo.Height != this._lastWindowInfo.Height)
this.Open(null, this._lastModalInfo.Width, this._lastModalInfo.Height, this._lastModalInfo.OnCloseFunction, this._lastModalInfo.X, this._lastModalInfo.Y, true);
else
this._checkForScrollResizeHandle = window.setTimeout(new Function('window.' + this._variableName + '._checkForScrollResize();'), 999);
}
}

HC_Modal.Close = function(returnValue)
{
if (this._isShown)
{
if (!this._initialized)
this._initialize();

this._modal.style.position = 'absolute';
this._modal.style.display = 'none';
this._modalAnimationMask.style.position = 'absolute';
this._modalAnimationMask.style.display = 'none';
this._modalMask.style.position = 'absolute';
this._modalMask.style.display = 'none';
this._modalIframe.src = this.LoadingHtmlUrl;

var onCloseFunction = this._lastModalInfo.OnCloseFunction;

this._isShown = false;
this._lastModalInfo = null;
this._windowInfo = null;

if (this._hiddenSelects)
{
for (var i = 0; i < this._hiddenSelects.length; i++)
{
if (this._hiddenSelects[i].Element.style.visibility == 'hidden')
this._hiddenSelects[i].Element.style.visibility = this._hiddenSelects[i].Visibility;
}

this._hiddenSelects = null;
}

if (onCloseFunction)
onCloseFunction(returnValue);

this.Dispose();
}
}

HC_Modal.Refresh = function()
{
if (this._animationHandle)
window.clearTimeout(this._animationHandle);

this.Dispose();

if (this._isShown && this._lastModalInfo)
this.Open(this._lastModalInfo.Url, this._lastModalInfo.Width, this._lastModalInfo.OnCloseFunction, this._lastModalInfo.Height, this._lastModalInfo.OnCloseFunction, this._lastModalInfo.X, this._lastModalInfo.Y);
}

HC_Modal._initialize = function()
{
this._modalMask = document.createElement('div');
this._modalMask.style.width = 'auto';
this._modalMask.style.height = 'auto';
this._modalMask.style.position = 'absolute';
this._modalMask.style.display = 'none';

var mm = this._modalMask;
if (this.WindowMaskCssClasses.length > 0)
{
mm.className = this.WindowMaskCssClasses[0];
for (var i = 1; i < this.WindowMaskCssClasses.length; i++)
{
mm.appendChild(document.createElement('div'));
mm = mm.childNodes[0];
mm.className = this.WindowMaskCssClasses[i];
mm.style.width = 'auto';
mm.style.height = 'auto';
}
}

document.body.appendChild(this._modalMask);

this._modalAnimationMask = document.createElement('div');
this._modalAnimationMask.style.position = 'absolute';
this._modalAnimationMask.style.display = 'none';
this._modalAnimationMask.style.overflow = 'hidden';

this._modal = document.createElement('div');
this._modal.style.width = 'auto';
this._modal.style.height = 'auto';
this._modal.style.position = 'absolute';
this._modal.style.display = 'none';

var m = this._modal;
if (this.WindowCssClasses.length > 0)
{
m.className = this.WindowCssClasses[0];
for (var i = 1; i < this.WindowCssClasses.length; i++)
{
m.appendChild(document.createElement('div'));
m = m.childNodes[0];
m.className = this.WindowCssClasses[i];
m.style.width = 'auto';
m.style.height = 'auto';
}
}

this._modalTitle = document.createElement('div');
m.appendChild(this._modalTitle);
if (this.WindowTitleCssClasses.length > 0)
{
this._modalTitle.className = this.WindowTitleCssClasses[0];
for (var i = 1; i < this.WindowTitleCssClasses.length; i++)
{
this._modalTitle.appendChild(document.createElement('div'));
this._modalTitle = this._modalTitle.childNodes[0];
this._modalTitle.className = this.WindowTitleCssClasses[i];
}
}
this._modalTitle.onmousedown = new Function('event', 'window.' + this._variableName + '._startDrag(event); return false;');

this._modalClose = document.createElement('div');
this._modalTitle.appendChild(this._modalClose);

var mc = this._modalClose;
if (this.WindowCloseCssClasses.length > 0)
{
mc.className = this.WindowCloseCssClasses[0];
for (var i = 1; i < this.WindowCloseCssClasses.length; i++)
{
mc.appendChild(document.createElement('div'));
mc = mc.childNodes[0];
mc.className = this.WindowCloseCssClasses[i];
}
}

this._modalClose.onclick = new Function('window.' + this._variableName + '.Close();');

this._modalTitle.appendChild(document.createElement('span'));

var e = document.createElement('div');
e.style.clear = 'both';
this._modalTitle.appendChild(e);

this._modalContent = document.createElement('div');
m.appendChild(this._modalContent);
if (this.WindowContentCssClasses.length > 0)
{
this._modalContent.className = this.WindowContentCssClasses[0];
for (var i = 1; i < this.WindowContentCssClasses.length; i++)
{
this._modalContent.appendChild(document.createElement('div'));
this._modalContent = this._modalContent.childNodes[0];
this._modalContent.className = this.WindowContentCssClasses[i];
}
}

this._modalIframe = document.createElement('iframe');
this._modalIframe.src = this.LoadingHtmlUrl;
this._modalIframe.width = '100%';
this._modalIframe.border = '0';
this._modalIframe.frameBorder = 'no';
this._modalIframe.style.borderLeftWidth = '0px';
this._modalIframe.style.borderRightWidth = '0px';
this._modalIframe.style.borderTopWidth = '0px';
this._modalIframe.style.borderBottomWidth = '0px';
this._modalContent.appendChild(this._modalIframe);

this._modalFooter = document.createElement('div');
m.appendChild(this._modalFooter);
var mf = this._modalFooter;
if (this.WindowFooterCssClasses.length > 0)
{
mf.className = this.WindowFooterCssClasses[0];
for (var i = 1; i < this.WindowFooterCssClasses.length; i++)
{
mf.appendChild(document.createElement('div'));
mf = mf.childNodes[0];
mf.className = this.WindowFooterCssClasses[i];
}
}

this._modalResize = document.createElement('div');
mf.appendChild(this._modalResize);

var e = document.createElement('div');
e.style.clear = 'both';
mf.appendChild(e);

var mr = this._modalResize;
if (this.WindowResizeCssClasses.length > 0)
{
mr.className = this.WindowResizeCssClasses[0];
for (var i = 1; i < this.WindowResizeCssClasses.length; i++)
{
mr.appendChild(document.createElement('div'));
mr = mr.childNodes[0];
mr.className = this.WindowResizeCssClasses[i];
}
}

this._modalResize.onmousedown = new Function('event', 'window.' + this._variableName + '._startResize(event); return false;');

this._modalAnimationMask.appendChild(this._modal);

document.body.appendChild(this._modalAnimationMask);

this._initialized = true;
}

HC_Modal.Dispose = function()
{
if (this._initialized)
{
if (this._animationHandle)
window.clearTimeout(this._animationHandle);

this._isShown = false;
this._isOpening = false;

if (document && document.body)
{
document.body.removeChild(this._modalAnimationMask);
document.body.removeChild(this._modalMask);
this._modalClose.onclick = null;
this._modalTitle.onmousedown = null;
this._modalResize.onmousedown = null;
this._modal = null;
this._modalTitle = null;
this._modalClose = null;
this._modalAnimationMask = null;
this._modalMask = null;
this._modalIframe = null;
this._modalResize = null;
this._modalFooter = null;
this._modalContent = null;
}

this._initialized = false;
}
}

HC_Modal._animate = function(targetValue, nextValue, step, acceleration)
{
if (this._animationHandle)
window.clearTimeout(this._animationHandle);

if (!this._isOpening)
return;

var currValue = parseInt(this._modal.style.top, 10);
if ((step < 0 && currValue < targetValue) || (step > 0 && currValue > targetValue) || Math.abs(step) < 1)
{
// complete
if (this._hiddenSelects)
{
for (var i = 0; i < this._hiddenSelects.length; i++)
this._hiddenSelects[i].Element.style.visibility = 'hidden';
}

this._modal.style.top = targetValue + 'px';
this._modal.style.position = 'static';
this._modalAnimationMask.style.overflow = 'visible';
this._animationHandle = null;

if (!this._isResizing && !this._isDragging)
this._modalIframe.style.display = 'block';

this._isOpening = false;

this._lastWindowInfo = this._getWindowInfo();
this._checkForScrollResizeHandle = window.setTimeout(new Function('window.' + this._variableName + '._checkForScrollResize();'), 999);
}
else
{
// continue animation
this._modal.style.top = nextValue + 'px';

nextValue = nextValue + step;
if (step > 0 && nextValue > targetValue)
nextValue = targetValue;
else if (step < 0 && nextValue < targetValue)
nextValue = targetValue;

step = step * acceleration;

this._animationHandle = window.setTimeout(new Function(this._variableName + '._animate(' + targetValue + ',' + nextValue + ',' + step + ',' + acceleration + ');'), 19);
}
}

HC_Modal._startDrag = function(event)
{
if (!this._initialized)
this._initialize();

if (!event)
event = window.event;

this._moveModalInfo = new Object();

this._moveModalInfo.StartMouseX = event.pageX ? event.pageX : event.screenX;
this._moveModalInfo.StartMouseY = event.pageY ? event.pageY : event.screenY;
this._moveModalInfo.StartModalX = this._lastModalInfo.X;
this._moveModalInfo.StartModalY = this._lastModalInfo.Y;
this._moveModalInfo.Button = event.button;

document.onmouseup = new Function('event', 'window.' + this._variableName + '._endDrag(event); return false;');
document.onmousemove = new Function('event', 'window.' + this._variableName + '._drag(event); return false;');

this._modalIframe.style.display = 'none';
this._isDragging = true;
}

HC_Modal._endDrag = function(event)
{
if (!this._initialized)
this._initialize();

this._isDragging = false;
this._moveModalInfo = null;
document.onmouseup = null;
document.onmousemove = null;
this._modalIframe.style.display = 'block';
}

HC_Modal._drag = function(event)
{
if (!this._initialized)
this._initialize();

if (!event)
event = window.event;

if (event.button != this._moveModalInfo.Button)
{
this._endDrag(event);
return;
}

var eventX = typeof(event.pageX) != 'undefined' ? event.pageX : event.screenX;
var eventY = typeof(event.pageY) != 'undefined' ? event.pageY : event.screenY;

var xChange = eventX - this._moveModalInfo.StartMouseX;
var yChange = eventY - this._moveModalInfo.StartMouseY;

this.Open(null, this._lastModalInfo.Width, this._lastModalInfo.Height, this._lastModalInfo.OnCloseFunction, this._moveModalInfo.StartModalX + xChange, this._moveModalInfo.StartModalY + yChange, true);
}

HC_Modal._startResize = function(event)
{
if (!this._initialized)
this._initialize();

if (!event)
event = window.event;

this._resizeModalInfo = new Object();

this._resizeModalInfo.StartMouseX = event.pageX ? event.pageX : event.screenX;
this._resizeModalInfo.StartMouseY = event.pageY ? event.pageY : event.screenY;
this._resizeModalInfo.StartModalWidth = this._lastModalInfo.Width;
this._resizeModalInfo.StartModalHeight = this._lastModalInfo.Height;
this._resizeModalInfo.Button = event.button;

document.onmouseup = new Function('event', 'window.' + this._variableName + '._endResize(event); return false;');
document.onmousemove = new Function('event', 'window.' + this._variableName + '._resize(event); return false;');

this._modalIframe.style.display = 'none';
this._isResizing = true;
}

HC_Modal._endResize = function(event)
{
if (!this._initialized)
this._initialize();

this._isResizing = false;
this._resizeModalInfo = null;
document.onmouseup = null;
document.onmousemove = null;
this._modalIframe.style.display = 'block';
}

HC_Modal._resize = function(event)
{
if (!this._initialized)
this._initialize();

if (!event)
event = window.event;

if (event.button != this._resizeModalInfo.Button)
{
this._endResize(event);
return;
}

var eventX = typeof(event.pageX) != 'undefined' ? event.pageX : event.screenX;
var eventY = typeof(event.pageY) != 'undefined' ? event.pageY : event.screenY;

var xChange = eventX - this._resizeModalInfo.StartMouseX;
var yChange = eventY - this._resizeModalInfo.StartMouseY;

this.Open(null, this._resizeModalInfo.StartModalWidth + xChange, this._resizeModalInfo.StartModalHeight + yChange, this._lastModalInfo.OnCloseFunction, this._lastModalInfo.X, this._lastModalInfo.Y, true);
}

HC_Modal.Configure('Utility/loading.htm',['CommonModal'],['CommonModalTitle'],['CommonModalClose'],['CommonModalContent'],['CommonModalFooter'],['CommonModalResize'],['CommonModalMask'],100);
---------------------

以下是相对应的CSS文件：Modal.css

/* Modal Styles */
.CommonModalMask
{
opacity: .4;
filter: alpha(opacity=40);
background-color: #333333;
z-index: 200;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color:transparent !important;
background-image: url("../../images/maskBG.png") !important; // For browsers Moz, Opera, etc.
background-image:none;
background-repeat: repeat;
display:none;
}

.CommonModal
{
border-style: solid;
border-width: 1px;
border-color: #888888;
border-right-width: 3px;
border-right-color: #888888;
border-bottom-width: 3px;
border-bottom-color: #888888;
background-color: #eeeeee;
}

.CommonModalTitle
{
background-color: #E0F0F9;
padding: 4px;
border-style: solid;
border-width: 0px;
border-bottom-width: 1px;
border-color: #D1B4B1;
color: #ffffff;
font-family: Arial, Helvetica;
font-size: 110%;
font-weight: bold;
margin: 0px;
height: 1.3em;
position: relative;
z-index: 203;
cursor: move
}

.CommonModalClose
{
width: 33px;
height: 12px;
background-image: url(../../images/close.gif);
background-repeat: no-repeat;
overflow: hidden;
cursor: pointer;
float: right;
}

.CommonModalContent
{
background-color: #ffffff;
}

.CommonModalFooter
{
border-style: solid;
border-width: 0px;
border-top-width: 1px;
border-color: #cccccc;
background-color: #eeeeee;
padding: 2px;
}

.CommonModalResize
{
width: 14px;
height: 14px;
background-image: url(../../images/resize.gif);
background-repeat: no-repeat;
overflow: hidden;
float: right;
cursor: se-resize;
}

----------------------

以下是操纵弹出窗口的html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<Link rel="stylesheet" type="text/css" href="../css/modal.css" />
</head>

<body>
<script type="text/javascript" src="/Utility/HC_Modal.js"></script>
<script language="javascript">
var aaa = function(value){if (value != undefined) document.getElementById("a").value=value;}
</script>
<a href="javascript:HC_Modal.Open('/login.asp',685,350,aaa);">登录</A>

<form id="form1" name="form1">
<label><input type="text" id="a" name="a" />
</label>
</form>
</body>
</html>
------

以下是在弹出窗口中显示的html 文件: login.asp

<!-- #include file=Utility/MD5.asp -->
<%
If Request.ServerVariables("Request_method") = "POST" Then
ReturnUrl = Request.Form("ReturnUrl")
%>
<script language="JavaScript">parent.HC_Modal.Close;</script>
<%

End if

%>
<title>登录</title>

<table height="20"><tr><td> </td></tr></table>
<form method="POST" name=form>
<input type="hidden" value="<%=Request.ServerVariables("HTTP_REFERER")%>" name="ReturnUrl">
<table cellspacing=1 cellpadding=0 width=400 id=CommonListArea align="center">
<tr id=CommonListTitle3>
<td align="center" colspan="2">登录</td>
</tr>
<tr id=CommonListCell height="30">
<td width="40%" align="right">用户名称：</td>
<td>
<input type="text" name="UserName" value="<%=CookieUserName%>" style="WIDTH:150">  <a href="leaguer/reg.asp">没有注册?</a>
<input type=hidden name=PriorUrl value=<%=PriorUrl%> />

</td>
</tr>
<tr id=CommonListCell height="30">
<td width="40%" align="right">用户密码：</td>
<td>
<input type="password" name="Userpass" style="WIDTH:150">  <a href="leaguer/passwordsearch.asp">找回密码?</a> </td>
</tr>
<tr id=CommonListCell>
<td width="40%" align="right" height="30">验 证 码：</td>
<td>
<input type="text" name="VerifyCode" MaxLength="4" size="10" οnblur="CheckVerifyCode(this.value)" onKeyUp="if (this.value.length == 4)CheckVerifyCode(this.value)"> <img src="../index/VerifyCode.asp" title="验证码,看不清楚?请点击刷新验证码" style="cursor:pointer" οnclick="this.src='../index/VerifyCode.asp?'+Math.random()"> <span id="CheckVerifyCode" style="color:red"></span>
</td>
</tr>
<tr id=CommonListCell>
<td align="right" width="40%" height="30">登录方式：</td>
<td>
<input type="checkbox" value="1" name="IsSave" id="IsSave"><label for="IsSave">自动登录</label>
<input type="checkbox" value="1" name="Invisible" id="Invisible"><label for="Invisible">隐身登录</label>
</td>
</tr>
<tr id=CommonListCell height="30">
<td align="center" colspan="2">
<input type="submit" value=" 登录 ">　<input type="reset" value=" 取消 ">
</td>
</tr>
</table>
</form>