这是一个实例,保存代码为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> <!-- 一个按钮 点击之后 显示一个div div要水平 垂直居中 当我浏览器高度 宽度变化的时候 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>
分类:
CSS/HTML
, Javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· Windows编程----内核对象竟然如此简单?