<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {margin:0;padding:0;font:normal 12px/1.5em simsun, Verdana,Lucida, Arial, Helvetica, sans-serif;}
body {background:url(bg.gif) repeat 0 0;}
.pop_wrap:after,
.pop_wrap .bg:after,
.pop_container:after {content:"";display:block;height:0;clear:both;visibility:hidden;font-size:0;line-height:0;}
.pop_wrap {position:absolute;overflow:hidden;padding:7px;zoom:1;z-index:999;}
.pop_container {position:relative;border:1px solid #ADADAD;background-color:#FFFFFF;zoom:1;z-index:5;}
.pop_wrap .bg {position:absolute;top:0;left:0;height:100%;padding:500px;background:url(bg_alpha.png) repeat 0 0;_background:#CCCCCC;zoom:1;}
.pop_wrap h3 {height:29px;line-height:29px;text-indent:11px;font-size:14px;border-bottom:1px solid #DFDFDF;background-color:#F1F1F1;}
.pop_wrap h3 span {line-height:29px;}
.pop_wrap .btn {clear:both;height:21px;padding:11px 0;text-align:right;border-top:1px solid #DFDFDF;background-color:#F1F1F1;}
.pop_wrap .btn button {margin-right:10px;cursor:pointer;}
.pop_wrap .close {position:absolute;top:6px;right:10px;color:#FF0000;z-index:5;}
.pop_wrap .close:hover {text-decoration:none;color:#000000;}
.pop_wrap .pop_container .content p {padding:50px;}
</style>
</head>
<body>
<div class="pop_wrap" style="width:400px;top:50px;left:100px;">
<!-- 弹出层内容 开始 -->
<div class="pop_container">
<h3 class="pop_header"><span>标题</span></h3>
<div class="content">
<p>这里放内容</p>
</div>
<a class="close">关闭</a>
<div class="btn"><button type="button">按钮</button></div>
</div>
<!-- 弹出层内容 结束 -->
<div class="bg"></div>
</div>
<div class="pop_wrap" style="width:200px;top:150px;left:530px;">
<!-- 弹出层内容 开始 -->
<div class="pop_container">
<h3 class="pop_header"><span>标题</span></h3>
<div class="content">
<p>这里放内容</p>
<p>这里放内容</p>
</div>
<a class="close">关闭</a>
<div class="btn"><button type="button">按钮</button></div>
</div>
<!-- 弹出层内容 结束 -->
<div class="bg"></div>
</div>
<div class="pop_wrap" style="width:300px;top:230px;left:260px;">
<!-- 弹出层内容 开始 -->
<div class="pop_container">
<h3 class="pop_header"><span>标题</span></h3>
<div class="content">
<p>这里放内容</p>
<p>这里放内容</p>
</div>
<a class="close">关闭</a>
<div class="btn"><button type="button">按钮</button></div>
</div>
<!-- 弹出层内容 结束 -->
<div class="bg"></div>
</div>
<div class="pop_wrap" style="width:200px;top:10px;right:10px;">
<!-- 弹出层内容 开始 -->
<div class="pop_container">
<h3 class="pop_header"><span>标题</span></h3>
<div class="content">
<p>这里放内容</p>
<p>这里放内容</p>
<p>这里放内容</p>
</div>
<a class="close">关闭</a>
<div class="btn"><button type="button">按钮</button></div>
</div>
<!-- 弹出层内容 结束 -->
<div class="bg"></div>
</div>
</body>
</html>
?
效果参见附件。