<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.BODY {
height:30000px;
}
.parent {
position:relative;left:100px;top:100px;width:510px;height:410px;
}
.content {
position:relative;left:0px;top:0px;width:510px;
}
.div {
width:100px;height:100px;border:solid red 1px;float:left;background-Color:#FFFFCC
}
#divM {
overflow:hidden;width:510px;height:0px;float:left;background-Color:#FFFFCC;
}
.mask {
z-Index:100;position:fixed;left:0px;top:0px;width:100%;height:100%;background-Color:#FFFFCC;
}
.form {
position:absolute;overflow:hidden;left:300px;top:300px;z-Index:201;width:610px;height:400px;background-Color:#FFCC66;text-Align:center;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="Open Form" onmouseup="zxcPopUpForm.open('myform',true);"/>
<div class="mask1" ></div>
<div id="myform" class="form" >
<form >
<br />
<input name="" /><br />
<input name="" /><br />
<input name="" /><br />
<input name="" /><br />
<br />
<br />
<input type="button" name="" value="Close Form" onmouseup="zxcPopUpForm.open('myform',false);"/>
</form>
</div>
<div style="height:3000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcPopUpForm={
init:function(o){
var id=o.FormID,frm=document.getElementById(id),ms=o.AnimateDuration,msk=document.createElement('DIV'),opc=o.MaskOpacity;
if (frm){
msk.style.position='fixed';
msk.className=o.MaskClass;
msk.style.width='100%';
msk.style.heigth='100%';
msk.style.left='0px';
msk.style.top='0px';
document.body.appendChild(msk);
msk.style.visibility='hidden';
frm.style.position='fixed';
frm.style.visibility='hidden';
this['zxc'+id]={
frm:frm,
msk:msk,
opc:typeof(opc)=='number'?opc:false,
ms:typeof(ms)=='number'?ms:20
};
this.addevt(msk,'mouseup','open',id,false);
this.addevt(window,'resize','resize',id);
}
},
open:function(id,ud){
var o=this['zxc'+id];
if (o){
this.resize(id);
o.frm.style.visibility='visible';
o.msk.style.visibility='visible';
this.animate(o,o.frm,ud?0:100,ud?100:0,new Date(),o.ms,'dly2');
if (o.opc){
this.animate(o,o.msk,ud?0:o.opc,ud?o.opc:0,new Date(),o.ms,'dly0');
}
}
},
resize:function(id){
var o=this['zxc'+id];
if (o){
var wwh=window.innerHeight?[window.innerWidth-10,window.innerHeight-10]:document.documentElement.clientHeight?[document.documentElement.clientWidth-10,document.documentElement.clientHeight-10]:[document.body.clientWidth,document.body.clientHeight];
o.frm.style.left=(wwh[0]-o.frm.offsetWidth)/2+'px';
o.frm.style.top=(wwh[1]-o.frm.offsetHeight)/2+'px';
}
},
animate:function(o,obj,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,p;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to); },10);
}
else {
if (t==0){
obj.style.visibility='hidden';
}
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}
zxcPopUpForm.init({
FormID:'myform', // the unique ID name of the form. (string)
MaskClass:'mask', // the class name of the mask. (string)
MaskOpacity:80, //(optional) the opacity of the mask. (number, default = no animated mask opacity)
AnimateDuration:1000 //(optional) the animation speed in milli seconds. (number, default = 20)
});
/*]]>*/
</script></body>
</html>