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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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";
        };
};

forCallback:function ()
{
        return this.info.callBack(this.info.parameter);
},
shadow:function ()
{
        var oShadow=G('dialogBoxShadow');
        var oDialog=G('dialogBox');oShadow['style']['position']="absolute";
        oShadow['style']['background']="#000";
        oShadow['style']['display']="";
        oShadow['style']['opacity']="0.2";
        oShadow['style']['filter']="alpha(opacity=20)";
        oShadow['style']['top']=oDialog.offsetTop+this.info.shadowWidth;
        oShadow['style']['left']=oDialog.offsetLeft+this.info.shadowWidth;
        oShadow['style']['width']=oDialog.offsetWidth;oShadow['style']['height']=oDialog.offsetHeight;
},
middle:function ()
{
        if(!this.config.isBackgroundCanClick)
     G('dialogBoxBG').style.display='';
        var oDialog=G('dialogBox');
        oDialog['style']['position']="absolute";
        oDialog['style']['display']='';
        var sClientWidth=document.body.clientWidth;
        var sClientHeight=document.documentElement.clientHeight;
var scrollPos; 
if (typeof window.pageYOffset != 'undefined') { 
   scrollPos = window.pageYOffset; 
} 
else if (typeof document.compatMode != 'undefined' && 
     document.compatMode != 'BackCompat') { 
   scrollPos = document.documentElement.scrollTop; 
} 
else if (typeof document.body != 'undefined') { 
   scrollPos = document.body.scrollTop; 
} 
        var sScrollTop=scrollPos;
        var sleft=(sClientWidth/2)-(oDialog.offsetWidth/2)+50;
        var iTop=-80+(sClientHeight/2+sScrollTop)-(oDialog.offsetHeight/2);
        var sTop=iTop>0?iTop:(sClientHeight/2+sScrollTop)-(oDialog.offsetHeight/2);
         if(sTop<1)
     sTop="20";
        if(sleft<1)
     sleft="20";
        oDialog['style']['left']=(document.documentElement.clientWidth)/3+"px";
        oDialog['style']['top']=(document.documentElement.scrollTop+(document.documentElement.clientHeight)/10)+"px";
		window.onscroll = function(){
			oDialog['style']['top']=(document.documentElement.scrollTop+(document.documentElement.clientHeight)/10)+"px";
			 G('dialogBoxShadow').style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight)/10+4)+"px";
			};
       // alert("sleft is " + sleft);
    //  alert("sTop is " + sTop);
},
//刷新页面，并关闭当前弹出窗口
reset:function ()
{
        if(this.config.isReloadOnClose)
        {
     top.location.reload();
        };
        this.close();
},
//关闭窗口
close:function ()
{
        G('dialogBox').style.display='none';
        if(!this.config.isBackgroundCanClick)
     G('dialogBoxBG').style.display='none';
        if(this.config.isShowShadow)
     G('dialogBoxShadow').style.display='none';
        G('dialogBody').innerHTML='';
        this.showSome();
},

hiddenSome:function ()
{
        //隐藏someHiddenTag中的所有元素
        var tag=this.info.someHiddenTag.split(",");
        if(tag.length==1&&tag[0]=="")
        {
     tag.length=0;
        }
        for(var j=0;j<tag.length;j++)
        {
     this.hiddenTag(tag[j]);
        };
var ids=this.info.someHiddenEle.split(",");
        if(ids.length==1&&ids[0]=="")
     ids.length=0;
        for(var j=0;j<ids.length;j++)
        {
     this.hiddenEle(ids[j]);
        };
        space("begin");
},
hiddenTag:function (tagName)
{
        var ele=document.getElementsByTagName(tagName);
        if(ele!=null)
        {
     for(var j=0;j<ele.length;j++)
     {
         if(ele[j].style.display!="none"&&ele[j].style.visibility!='hidden')
         {
      ele[j].style.visibility='hidden';
      this.someToHidden.push(ele[j]);
         };
     };
         };
     },

hiddenEle:function (id)
     {
        var ele=document.getElementById(id);
        if(typeof(ele)!="undefined"&&ele!=null)
        {
     ele.style.visibility='hidden';
     this.someToHidden.push(ele);
        }
     },

showSome:function ()
     {
        for(var j=0;j<this.someToHidden.length;j++)
        {
     this.someToHidden[j].style.visibility='visible';
        };
        space("end");
     }
        };

</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="600px">
  <tr>
    <td align="center"><a href="javascript:Comment('http://zhidao.baidu.com/userlogin.html?login',450,250)">登陆窗口</a>
    <a href="javascript:ShowAlert('标题','内容',300,140)">警告窗口</a></td>
  </tr>
</table>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

表格图层

描述

百度登录的层弹出窗口特效，貌似代码有点乱，偶没有看懂，注释太少了，不过效果不错，互联网老大的东西，应该不错，正在学习这方面的朋友可以作为学习参考吧！