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

最新推荐文章于 2021-06-10 17:29:35 发布

weixin_34362790

最新推荐文章于 2021-06-10 17:29:35 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/pureqq/p/3952318.html

版权

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

半透明的页面在网页开发中使用的比较广泛，尤其在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>