首页 > 代码库 > 网页开发笔记【一】创建一个半透明的页面

网页开发笔记【一】创建一个半透明的页面

2024-07-20 20:36:09   220人阅读

近来正在温习网页制作，系列《网页开发笔记》记录本人在解决网页开发过程中遇到的问题以及解决方案。

 

半透明的页面在网页开发中使用的比较广泛，尤其在web app中，这种设计使用的地方更为广泛，本文记录这种半透明的页面的开发方法。

半透明页面常用于用户注册，这时候弹出一个页面能在不离开当前页面的情况下完成注册。

如百度的登陆界面所示。

我的处理方法如下：

首先在页面写一个div，这个div平时display设置为none，当需要的时候设置为display:block;

这个div（设其id为popup）为实际的登陆面板（也就是上图的白色区域）的容器。

则popup的css代码如下：

.popup{position:fixed;left:0px;top:0px;padding:0px;border:none;margin:0px;background:black;opacity:0.5;}

div设置为fixed方式定位，相对body进行定位。

然后注意这个popup的宽度和高度并没有设置，我们可以在window.onload事件中来设置popup的宽度和高度。

javascript代码如下：

window.onload = function(){var height = Math.max(document.body.clientHeight,document.documentElement.clientHeight);var width = Math.max(document.body.clientWidth,document.documentElement.clientWidth);var obj = document.getElementById("popup");obj.style.width=width+"px";obj.style.height=height+"px";}

 这里面值得注意的是：var height = Math.max(document.body.clientHeight,document.documentElement.clientHeight);

这段代码的原因是这样的：

因为w3c的标准的原因，不同的浏览器以及加不加DOCTYPE都有区别：http://hi.baidu.com/bluedream_119/item/26db5a73c9774344ee1e532a

此外，关于clientTop，clientWidth等参数的含义参考这篇文章：http://blog.csdn.net/xuantian868/article/details/3116442

完整的示例代码如下：

 1 <!DOCTYPE html>  2  3 <html> 4 <head>  5     <title>Demo1</title> 6 </head> 7  8 <script type="text/javascript"> 9 window.onload=function()10 {11 var height = Math.max(document.body.clientHeight,document.documentElement.clientHeight);12 var width = Math.max(document.body.clientWidth,document.documentElement.clientWidth);13 14 var obj = document.getElementById("div1");15 obj.style.width=width+"px";16 obj.style.height=height+"px";17 }18 </script>19 20 <style type="text/css">21 22 .wrapper{23  width:100%;24  height:2000px;25  padding:0px;26  margin:0px;27  border:none;28  background:green;29 }30 31 32 .trans{33 position:fixed;34 left:0px;35 top:0px;36 padding:0px;37 border:none;38 margin:0px;39 background:black;40 opacity:0.5;41 }42 43 .addplan{44 background:white;45 }46 </style>47 48 <body class="wrapper">49 <div id="div1" class="trans">50 </div>51 </body>52 </html>

 

 至此，半透明的页面完成了。

 

网页开发笔记【一】创建一个半透明的页面


联系
我们