百度登录的层弹出窗口特效

答案：<!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">
<head>
<title>百度登陆弹出窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript">
if(!Array.prototype.push)
{
       Array.prototype.push=function ()
       {
var startLength=this.length;
for(var j=0;j<arguments.length;j++)
{
        this[startLength+j]=arguments[j];
}
return this.length;
        }
};
function G()
{
       var elements=new Array();
       for(var j=0;j<arguments.length;j++)
       {
var element=arguments[j];
if(typeof element=='string')
{
        element=document.getElementById(element);
}
if(arguments.length==1)
{
        return element;
}
elements.push(element);
       };
       return elements;
};
Function.prototype.bind=function (object)
{
       var __method=this;
       return function ()
       {
__method.apply(object,arguments);
       };
};
Function.prototype.bindAsEventListener=function (object)
{
       var __method=this;
       return function (event){__method.call(object,event||window.event);};
};
Object.extend=function (destination,source)
{
       for(property in source)
       {
destination[property]=source[property];
       };
       return destination;
};
if(!window.Event)
{
       var Event=new Object();
};
Object.extend(
       Event,
       {
observers:false,
element:function (event)
{
        return event.target||event.srcElement;
},
isLeftClick:function (event)
{
        return (((event.which)&&(event.which==1))||((event.button)&&(event.button==1)));
},
pointerX:function (event)
{
        return event.pageX||(event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
},
pointerY:function (event)
{
        return event.pageY||(event.clientY+(document.documentElement.scrollTop||document.body.scrollTop));
},
stop:function (event)
{
        if(event.preventDefault)
        {
     event.preventDefault();
     event.stopPropagation();
        }
        else
        {
     event.returnValue=false;
     event.cancelBubble=true;
        };
},
findElement:function (event,tagName)
{
        var element=Event.element(event);
        while(element.parentNode&&(!element.tagName||(element.tagName.toUpperCase()!=tagName.toUpperCase())))
     element=element.parentNode;
        return element;
},
_observeAndCache:function (element,name,observer,useCapture)
{
        if(!this.observers)
     this.observers=[];
        if(element.addEventListener)
        {
     this.observers.push([element,name,observer,useCapture]);
     element.addEventListener(name,observer,useCapture);
        }
        else if(element.attachEvent)
        {
     this.observers.push([element,name,observer,useCapture]);
     element.attachEvent('on'+name,observer);
        };
},
unloadCache:function ()
{
        if(!Event.observers)
     return;
        for(var j=0;j<Event.observers.length;j++)
        {
     Event.stopObserving.apply(this,Event.observers[j]);
     Event.observers[j][0]=null;
        };
        Event.observers=false;
},
observe:function (element,name,observer,useCapture)
{
        var element=G(element);
        useCapture=useCapture||false;
        if(name=='keypress'&&(navigator.appVersion.match(/Konqueror|Safari|KHTML/)||element.attachEvent))
     name='keydown';
        this._observeAndCache(element,name,observer,useCapture);
},
stopObserving:function (element,name,observer,useCapture)
{
        var element=G(element);
        useCapture=useCapture||false;
        if(name=='keypress'&&(navigator.appVersion.match(/Konqueror|Safari|KHTML/)||element.detachEvent))
     name='keydown';
        if(element.removeEventListener)
        {
     element.removeEventListener(name,observer,useCapture);
        }
        else if(element.detachEvent)
        {
     element.detachEvent('on'+name,observer);
        };
}
       }
);
Event.observe(window,'unload',Event.unloadCache,false);
var Class=function ()
{
       var _class=function ()
       {
this.initialize.apply(this,arguments);
       };
       for(j=0;j<arguments.length;j++)
       {
superClass=arguments[j];
for(member in superClass.prototype)
{
        _class.prototype[member]=superClass.prototype[member];
};
       };
       _class.child=function ()
       {
return new Class(this);
       };
       _class.extend=function (f)
       {
for(property in f)
{
        _class.prototype[property]=f[property];
};
       };
       return _class;
};
function space(flag)
{
       if(flag=="begin")
       {
var ele=document.getElementById("ft");
if(typeof(ele)!="undefined"&&ele!=null)
        ele.id="ft_popup";
ele=document.getElementById("usrbar");
if(typeof(ele)!="undefined"&&ele!=null)
        ele.id="usrbar_popup";
        }
        else if(flag=="end")
        {
var ele=document.getElementById("ft_popup");
if(typeof(ele)!="undefined"&&ele!=null)
        ele.id="ft";
ele=document.getElementById("usrbar_popup");
if(typeof(ele)!="undefined"&&ele!=null)
        ele.id="usrbar";
        };
};

var Popup=new Class();
Popup.prototype={
iframeIdName:'ifr_popup',
initialize:function (config)
{
          this.config=Object.extend({contentType:1,isHaveTitle:true,scrollType:'no',isBackgroundCanClick:false,isSupportDraging:true,isShowShadow:true,isReloadOnClose:true,width:400,height:300},config||{});
this.info={shadowWidth:4,title:"",contentUrl:"",contentHtml:"",callBack:null,parameter:null,confirmCon:"",alertCon:"",someHiddenTag:"select,object,embed",someHiddenEle:"",overlay:0,coverOpacity:40};
      this.color={cColor:"#EEEEEE",bColor:"#FFFFFF",tColor:"#709CD2",wColor:"#FFFFFF"};
       this.dropClass=null;
       this.someToHidden=[];
        if(!this.config.isHaveTitle)
        {
     this.config.isSupportDraging=false;
        }
       this.iniBuild();
},
setContent:function (arrt,val)
{
        if(val!='')
        {
     switch(arrt)
     {
         case 'width':this.config.width=val;
         break;
         case 'height':this.config.height=val;
         break;
         case 'title':this.info.title=val;
         break;
         case 'contentUrl':this.info.contentUrl=val;
         break;
         case 'contentHtml':this.info.contentHtml=val;
         break;
         case 'callBack':this.info.callBack=val;
         break;
         case 'parameter':this.info.parameter=val;
         break;
         case 'confirmCon':this.info.confirmCon=val;
         break;
         case 'alertCon':this.info.alertCon=val;
         break;
         case 'someHiddenTag':this.info.someHiddenTag=val;
         break;
         case 'someHiddenEle':this.info.someHiddenEle=val;
         break;
         case 'overlay':this.info.overlay=val;
     };
        };
},
iniBuild:function ()
{
        G('dialogCase')?G('dialogCase').parentNode.removeChild(G('dialogCase')):function (){};
        var oDiv=document.createElement('span');
        oDiv.id='dialogCase';
        document.body.appendChild(oDiv);
},
build:function ()
{
        var baseZIndex=10001+this.info.overlay*10;
        var showZIndex=baseZIndex+2;
       this.iframeIdName='ifr_popup'+this.info.overlay;
        var path="http://img.baidu.com/hi/img/";
       var close='<input type="image" id="dialogBoxClose" src="'+path+'dialogclose.gif" border="0" width="16" height="16" align="absmiddle" title="关闭"/>';
      var cB='filter: alpha(opacity='+this.info.coverOpacity+');opacity:'+this.info.coverOpacity/100+';';
      var c
上一个：飘出的广告窗口，可以自动关闭
下一个：CSS垂直水平都居中
更多图片编程知识: