JS当前页面登录注册框,固定DIV,底层阴影的实例代码
这是一个实例，保存代码为html文件运行试试吧。兼容火狐、ie6、ie7、ie8、Chrome等。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>JS当前页面登录注册框，固定DIV，底层阴影——毛票票</title>
<!--
一个按钮
点击之后显示一个div
div要水平垂直居中
当我浏览器高度宽度变化的时候
div依然水平垂直居中
点击遮罩层，浮动层隐藏
知识点：
1.如何用css控制div水平垂直居中
2.如何用js取得浏览器高度宽度
3.如何控制resize事件-->
<styletype="text/css">
.hidden{display:none}
/*评论浮动层*/
#smallLay{width:498px;height:100px;padding:4px10px10px;background-color:#FFFFFF;border:1pxsolid#05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px2px6px#000;-moz-box-shadow:3px3px6px#555;}
</style>
</head>
<scripttype="text/javascript">
//判断浏览器ie6创建的div的样式和非ie6创建的div的样式
//创建div
functionshowid(idname){
varisIE=(document.all)?true:false;
varisIE6=isIE&&([/MSIE(\d)\.0/i.exec(navigator.userAgent)][0][1]==6);
varnewbox=document.getElementById(idname);
newbox.style.zIndex="9999";
newbox.style.display="block"
newbox.style.position=!isIE6?"fixed":"absolute";
newbox.style.top=newbox.style.left="50%";
newbox.style.marginTop=-newbox.offsetHeight/2+"px";
newbox.style.marginLeft=-newbox.offsetWidth/2+"px";
varjihualayer=document.createElement("div");
jihualayer.id="jihualayer";
jihualayer.style.width=jihualayer.style.height="100%";
jihualayer.style.position=!isIE6?"fixed":"absolute";
jihualayer.style.top=jihualayer.style.left=0;
jihualayer.style.backgroundColor="#000";
jihualayer.style.zIndex="9998";
jihualayer.style.opacity="0.6";
document.body.appendChild(jihualayer);
varsel=document.getElementsByTagName("select");
for(vari=0;i<sel.length;i++){
sel[i].style.visibility="hidden";
}
functionjihualayer_iestyle(){
jihualayer.style.width=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth)
+"px";
jihualayer.style.height=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)+
"px";
}
functionnewbox_iestyle(){
newbox.style.marginTop=document.documentElement.scrollTop-newbox.offsetHeight/2+"px";
newbox.style.marginLeft=document.documentElement.scrollLeft-newbox.offsetWidth/2+"px";
}
if(isIE){jihualayer.style.filter="alpha(opacity=60)";}
if(isIE6){
jihualayer_iestyle()
newbox_iestyle();
window.attachEvent("onscroll",function(){
newbox_iestyle();
})
window.attachEvent("onresize",jihualayer_iestyle)
}
jihualayer.onclick=function(){
newbox.style.display="none";jihualayer.style.display="none";for(vari=0;i<sel.length;i++){
sel[i].style.visibility="visible";
}
}
}
</script>
<body>
<divstyle="width:200px;height:100px;"></div>
<inputname=""type="button"id="showbtn"value="点击显示"onclick="showid('smallLay')"/>
<!--收藏浮层开始-->
<divid="smallLay"style="display:none">
这<ahref="http://jihua.cnblogs.com"style="text-decoration:none;color:Gray;">是</a>悬浮层
</div>
<!--收藏浮层结束-->
<divid="a"style="height:1000px;">这<ahref="http://jihua.cnblogs.com"style="text-decoration:none;color:Black;">是</a>普通层</div>
</body>
</html>
以上就是小编为大家带来的JS当前页面登录注册框,固定DIV,底层阴影的实例代码的全部内容了，希望对大家有所帮助，多多支持毛票票~