這是一個實例，保存代碼為html文件運行試試吧。兼容火狐、ie6、ie7、ie8、Chrome等。
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS當前頁面登錄注冊框，固定DIV，底層陰影――武林網(wǎng)</title><!--一個按鈕點擊之后 顯示一個divdiv要水平 垂直居中當我瀏覽器高度 寬度變化的時候div依然水平 垂直居中點擊遮罩層，浮動層隱藏知識點：1.如何用css控制div水平垂直居中2.如何用js取得瀏覽器高度寬度3.如何控制resize事件--><style type="text/css">.hidden{ display:none}/*評論浮動層*/#smallLay{width:498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;}</style></head><script type="text/javascript"> //判斷瀏覽器ie6創(chuàng)建的div的樣式和非ie6創(chuàng)建的div的樣式 //創(chuàng)建div function showid(idname) { var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6); var newbox = 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"; var jihualayer = 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); var sel = document.getElementsByTagName("select"); for (var i = 0; i < sel.length; i++) { sel[i].style.visibility = "hidden"; } function jihualayer_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"; } function newbox_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 (var i = 0; i < sel.length; i++) { sel[i].style.visibility = "visible"; } } }</script><body><div style="width:200px; height:100px;"></div><input name="" type="button" id="showbtn" value="點擊顯示" onclick="showid('smallLay')" /><!--收藏浮層開始--><div id="smallLay" style="display:none" >這<a style="text-decoration:none; color:Gray;">是</a>懸浮層</div><!--收藏浮層結束--><div id="a" style="height:1000px;">這<a style="text-decoration:none; color:Black;">是</a>普通層</div></body></html>以上就是小編為大家?guī)淼腏S當前頁面登錄注冊框,固定DIV,底層陰影的實例代碼的全部內(nèi)容了，希望對大家有所幫助，多多支持武林網(wǎng)~
新聞熱點
疑難解答
