JS当前页面登录注册框,固定DIV,底层阴影的实例代码

2019-11-20 08:51:06

字体：大中小

来源：转载

供稿：网友

这是一个实例，保存代码为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，底层阴影――武林网</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创建的div的样式和非ie6创建的div的样式  //创建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 href="http://jihua.cnblogs.com" style="text-decoration:none; color:Gray;">是</a>悬浮层</div><!--收藏浮层结束--><div id="a" style="height:1000px;">这<a href="http://jihua.cnblogs.com" style="text-decoration:none; color:Black;">是</a>普通层</div></body></html>

以上就是小编为大家带来的JS当前页面登录注册框,固定DIV,底层阴影的实例代码的全部内容了，希望对大家有所帮助，多多支持武林网~

上一篇：浅谈javascript:两种注释,声明变量,定义函数

下一篇：Bootstrap Table从服务器加载数据进行显示的实现方法