快捷導(dǎo)航

JS當(dāng)前頁(yè)面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼

更新時(shí)間：2016年09月29日 09:40:55 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS當(dāng)前頁(yè)面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

這是一個(gè)實(shí)例，保存代碼為html文件運(yùn)行試試吧。兼容火狐、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當(dāng)前頁(yè)面登錄注冊(cè)框，固定DIV，底層陰影——腳本之家</title>
<!--
一個(gè)按鈕
點(diǎn)擊之后 顯示一個(gè)div
div要水平 垂直居中
當(dāng)我瀏覽器高度 寬度變化的時(shí)候
div依然水平 垂直居中
點(diǎn)擊遮罩層，浮動(dòng)層隱藏
知識(shí)點(diǎn)：
1.如何用css控制div水平垂直居中
2.如何用js取得瀏覽器高度寬度
3.如何控制resize事件-->
<style type="text/css">
.hidden{ display:none}
/*評(píng)論浮動(dòng)層*/
#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="點(diǎn)擊顯示" onclick="showid('smallLay')" />
<!--收藏浮層開始-->
<div id="smallLay" style="display:none" >
這<a  style="text-decoration:none; color:Gray;">是</a>懸浮層
</div>
<!--收藏浮層結(jié)束-->
<div id="a" style="height:1000px;">這<a  style="text-decoration:none; color:Black;">是</a>普通層</div>
</body>
</html>

以上就是小編為大家?guī)?lái)的JS當(dāng)前頁(yè)面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~

您可能感興趣的文章: