javascript 弹出动画对话框

本文内容 1 弹出一个动画式的对话框 2 屏蔽对话框父页面的内容

代码如下：

body 中一个按钮用来弹出对话框，一个div用来显示对话框内容。


<a href="#" class="od" onclick = "show('fd');return false;">打开</a>




<div id="fd" style="position: absolute;top:25%;left:25%;display:none;filter:alpha(opacity=100);opacity:1; text-align: center; z-index:9999">


<a href="" onclick="return closeed('fd')">关闭</a>


你好！欢迎登录！


</div>

js脚本


var prox;


var proy;


var proxc;


var proyc;




function show(id)...{/**//*--打开--*/


clearInterval(prox);


clearInterval(proy);


clearInterval(proxc);


clearInterval(proyc);


var o = document.getElementById(id);


o.style.display = "block";


o.style.width = "1px";


o.style.height = "1px";


o.zIndex = 9999;




prox = setInterval(function()...{openx(o,500)},10);


zhezhaoshow();


}




function openx(o,x)...{/**//*--打开x--*/


var cx = parseInt(o.style.width);


if(cx < x)




...{


o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";


}


else




...{


clearInterval(prox);




proy = setInterval(function()...{openy(o,200)},10);


}


}




function openy(o,y)...{/**//*--打开y--*/


var cy = parseInt(o.style.height);


if(cy < y)




...{


o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";


}


else




...{


clearInterval(proy);


}


}




function closeed(id)...{/**//*--关闭--*/


clearInterval(prox);


clearInterval(proy);


clearInterval(proxc);


clearInterval(proyc);


var o = document.getElementById(id);


if(o.style.display == "block")




...{




proyc = setInterval(function()...{closey(o)},10);


}


return false;


}




function closey(o)...{/**//*--关闭y--*/


var cy = parseInt(o.style.height);


if(cy > 0)




...{


o.style.height = (cy - Math.ceil(cy/5)) +"px";


}


else




...{


clearInterval(proyc);




proxc = setInterval(function()...{closex(o)},10);


}


}




function closex(o)...{/**//*--关闭x--*/


var cx = parseInt(o.style.width);


if(cx > 0)




...{


o.style.width = (cx - Math.ceil(cx/5)) +"px";


}


else




...{


clearInterval(proxc);


o.style.display = "none";


}


zhezhaodelete();


}


function zhezhaoshow()//遮罩层




...{


var menuoverid="divover";


var divover;


if( document.getElementById(menuoverid) == null )




...{


var newControlover = document.createElement("div");


newControlover.id = menuoverid;


document.body.appendChild(newControlover);


with(newControlover.style)




...{


position = 'absolute';


background = '#CCCCCC';


left = '0px';


top = '0px';


width = window.screen.availWidth;


height = window.screen.availHeight;


zIndex = 9998;


filter='alpha(opacity=50)';


}


divover=newControlover;


}


else




...{


divover= document.getElementById(menuoverid);


}


}


function zhezhaodelete()//遮罩层




...{


var div2 = document.getElementById("divover");


if(div2)


div2.parentNode.removeChild(div2);


}

本文结束，原创博客，请勿随意转载