一直使用发现163的邮箱中ajax应用相当完美,特别是邮箱克隆中弹出窗口效果,简直就是模拟软件,很酷!可不知道代码是怎么写的,没来得及研究。今天偶然在javascript论坛看到有人贴出了代码,便收藏了。
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 弹出特效 </ title >
</ head >
< script >
var falpha= 0 ;
function fchange(){
if (falpha != 90 ){
table1.style.filter = " alpha(opacity= " + falpha + " ) " ;
falpha = falpha + 10 ;
setTimeout( " fchange() " , 200 )
}
else { falpha = 0 ;
}
}
function sss(){
table1.style.height = (window.document.body.clientHeight > window.document.body.scrollHeight) ? window.document.body.clientHeight:window.document.body.scrollHeight;
table1.style.width = " 100% " ;
table1.style.display = 'block'
table2.style.left = window.document.body.scrollWidth / 2 - 100 ;
table2.style.top = window.document.body.offsetHeight / 2 - 100
table2.style.display = 'block'
fchange()
}
function freset(){
table1.style.display = 'none'
table2.style.display = 'none'
}
</ script >
< body topmargin =0 leftmargin =0 bgcolor =yellow style ="display:block;" >
< table id ="table1" style =" background='#FFFFFF'; display: none;position: absolute;z-index=1;filter:alpha(opacity=90)" oncontextmenu ="return false" >
< tr width =100% height =100% >
< td >
</ table >
< table oncontextmenu ="return false" id ="table2" border ="2" style ="background='#E1E100'; borderColor=red; display: none; position: absolute;z-index=2;width:200;height:100;" cellspacing ="0" cellpadding ="0" bordercolor ="#800000" >
< tr width =150 height =20 >
< td align ="right" borderColor ="#E1E100" >
< input type ="button" onclick ="freset()" value ='确定' >
</ td >< td borderColor ="#E1E100" >< input type ="button" onclick ="freset()" value ='取消' ></ td >
</ tr >
</ table >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< p >< br >< br >< br >< br >
< input type ="button" onclick ="sss()" value ='申请提交' >
</ p >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 弹出特效 </ title >
</ head >
< script >
var falpha= 0 ;
function fchange(){
if (falpha != 90 ){
table1.style.filter = " alpha(opacity= " + falpha + " ) " ;
falpha = falpha + 10 ;
setTimeout( " fchange() " , 200 )
}
else { falpha = 0 ;
}
}
function sss(){
table1.style.height = (window.document.body.clientHeight > window.document.body.scrollHeight) ? window.document.body.clientHeight:window.document.body.scrollHeight;
table1.style.width = " 100% " ;
table1.style.display = 'block'
table2.style.left = window.document.body.scrollWidth / 2 - 100 ;
table2.style.top = window.document.body.offsetHeight / 2 - 100
table2.style.display = 'block'
fchange()
}
function freset(){
table1.style.display = 'none'
table2.style.display = 'none'
}
</ script >
< body topmargin =0 leftmargin =0 bgcolor =yellow style ="display:block;" >
< table id ="table1" style =" background='#FFFFFF'; display: none;position: absolute;z-index=1;filter:alpha(opacity=90)" oncontextmenu ="return false" >
< tr width =100% height =100% >
< td >
</ table >
< table oncontextmenu ="return false" id ="table2" border ="2" style ="background='#E1E100'; borderColor=red; display: none; position: absolute;z-index=2;width:200;height:100;" cellspacing ="0" cellpadding ="0" bordercolor ="#800000" >
< tr width =150 height =20 >
< td align ="right" borderColor ="#E1E100" >
< input type ="button" onclick ="freset()" value ='确定' >
</ td >< td borderColor ="#E1E100" >< input type ="button" onclick ="freset()" value ='取消' ></ td >
</ tr >
</ table >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< p >< br >< br >< br >< br >
< input type ="button" onclick ="sss()" value ='申请提交' >
</ p >
</ body >
</ html >
其基本思想是:
设定一个表格a1,并且z-index为1,并且为绝对定位。开始把其display设为none,然后设定一个隐藏的模拟的弹出窗口a2,z-index为2,显示属性设为none,在页面中添加一个按钮激活事件,然后把a1的display设为block,宽高都设为100%,并调节其透明度;因为display=block,z-index=1这样它就覆盖了原页面的内容使其不能编辑。点击模拟窗口中按钮激活复原属性,把a1,a2显示都设为none.