网站开发笔记【一】创建一个半透明的页面
近来正在温习网页制作,系列《网页开发笔记》记录本人在解决网页开发过程中遇到的问题以及解决方案。
半透明的页面在网页开发中使用的比较广泛,尤其在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
完整的示例代码如下:
<!DOCTYPE html> <html> <head> <title>Demo1</title> </head> <script type="text/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("div1"); var contentobj = document.getElementById("divcontent"); obj.style.width=width+"px"; obj.style.height=height+"px"; contentobj.style.left = (width-400)/2 + "px"; } </script> <style type="text/css"> .nopmb{ padding:0px; margin:0px; border:none; } .wrapper1{ position:fixed; left:0px; top:0px; z-index:9999; } .transpanel{ position:absolute; left:0px; top:0px; width:100%; height:100%; background:black; opacity:0.5; } .divContent{ position:absolute; top:150px; line-height:500px; text-align:center; width:600px; height:500px; background:white; font-size:48px; } .addplan{ background:white; } .div200pink { width:100%; height:200px; background:pink; margin-top:30px; z-index:-1; } .div200cyan { width:100%; height:200px; background:cyan; margin-top:30px; z-index:-1; } </style> <body class="nopmb"> <!-- 外层包装 --> <div id="div1" class="nopmb wrapper1"> <div class="nopmb transpanel"></div> <div id="divcontent" class="divContent">This is Login Panel</div> </div> <div class="nopmb div200pink"></div> <div class="nopmb div200cyan"></div> <div class="nopmb div200pink"></div> <div class="nopmb div200cyan"></div> <div class="nopmb div200pink"></div> <div class="nopmb div200cyan"></div> </body> </html>
至此,半透明的页面完成了。