拥有阴影并能自适应的弹出层
<!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 style="width:400px;top:50px;left:100px;"> <!-- 弹出层内容 开始 --> <div style="width:200px;top:150px;left:530px;"> <!-- 弹出层内容 开始 --> <div style="width:300px;top:230px;left:260px;"> <!-- 弹出层内容 开始 --> <div 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>?
效果参见附件。