现在网上很多站点都会出现这种交互的形式:当用户点击某个按钮或链接时弹出一个窗口或对话框,这个对话框不是传统意义上的窗口(alert(“Hello,world.”),confirm形式的),而是一种界面简洁的一个窗口,很多朋友可能觉得这种窗口实现起来很复杂,其实原理很简单:主要是有个两个div标签,第一标签是显示对话框的,第二个div标签是在则是在第一个标签生效时覆盖整个窗口并将其设置为灰色的,这样当第一个窗口出现时,它的背景就看其来是灰色的。当关闭窗口时再把连个div标签隐藏即可。

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 500px;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;

<div id=”light” class=”white_content”></div>

<div id=”fade” class=”black_overlay”></div>

例子

本文地址:http://www.yaronspace.cn/blog/index.php/archives/80

来自yaronspace.cn  本文链接:http://yaronspace.cn/blog/archives/80