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);  
}

 

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