网站制作学习网JS脚本→正文:仿百度知道终极登录效果
字体:

仿百度知道终极登录效果

JS脚本 2010/4/5 11:44:27  点击:不统计


仿百度知道终极登陆页面,点击登陆后背景变成灰色半透明,弹出登陆窗口
查看效果:仿百度知道终极登录效果
代码如下:
<html>
<head>
<title>仿百度知道终极登录效果</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">仿百度知道登录效果</a></p>
<p>
.black_overlay{ 显示透明黑色层的类
display: none;  刚打开时的显示状态,值none,即不显示
position: absolute; 绝对定位
top: 0%; //距离顶部0
left: 0%; 距离左边0
width: 100%; 宽100%
height: 100%; 高100%
background-color: black;
z-index:1001; z轴是表示最上层,显示最前的层
-moz-opacity: 0.8; //不清楚
opacity:.80; //透明度 80%
filter: alpha(opacity=80); //滤镜80%
}
.white_content { 弹出页面内容的第二个框
display: none; 开始打开不显示
position: absolute; 绝对定位
top: 25%; 距离顶部25%
left: 25%; 距离左边25%
width: 50%; 宽50%
height: 50%; 高50%
padding: 16px; 内容内缩进16px
border: 16px solid orange; 显示框的边框宽,实线 黄色
background-color: white; 背景颜色白色
z-index:1002; 比上个层更在前面一层
overflow: auto;
}
</P>
<div id="light" class="white_content">要显示的内容. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

·上一篇:RegExp静态的实例属性 >>    ·下一篇:javascript事件处理函数/监听函数 >>
推荐文章
最新文章