本文内容 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 >
< 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);
}
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);
}
本文结束,原创博客,请勿随意转载