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,底层阴影的实例代码的全部内容了,希望对大家有所帮助,多多支持毛票票~