一. 标题+内容+关闭按钮
示例代码：
<style type="text/css"> .pop_cov {z-index: 20000;left: 50%;top: 50%;width: 192px;height: 112px;position: fixed;display:block;} .pop_body {background-color: #fefefe;font-family: 微软雅黑;left: -50%;top: -50%;position: absolute;border: 1px solid #000;} .pop_title {height: 18px;color: #fff;background: #000;padding: 8px;} .pop_content {height: 30px;width: 150px;padding: 20px;color: #000;padding-bottom: 23px;} .pop_title a {background: url(dlg-close.gif) -15px 4px no-repeat;width: 15px;height: 20px;cursor: pointer;float: right;} .pop_title h4 {margin:0px;float:left;} </style> <div class="pop_cov" id="pop_cov"> <div class="pop_body"> <div class="pop_title"><h4>标题</h4><a onclick="document.getElementById('pop_cov').style.display='none'"></a></div> <div class="pop_content">内容</div> </div> </div>
二. 蒙版+半透明边框弹窗
示例代码：
<!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> <title></title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> #Body{ z-index:1; display:block;height:1000px;} /*蒙版样式*/ #Cover{ z-index:2; display:block; position:fixed;width:100%;height:100%;left:0;top:0; background-color:Black;opacity: 0.5;z-index:999;} /*弹窗样式*/ #pop_cov{left:50%;top:50%;display: block; width: 362px; height: 192px; position:fixed;} .Pop{background-color:rgba(255, 255, 255, 0.3);font-family: 微软雅黑; padding:10px; position:relative;left:-50%;top:-50%;z-index:9999;} .popMain{height: 172px;background: white;} .btnClose {width: 13px;height: 13px;position: absolute;overflow: hidden;right: 20px;top: 20px;background: url(http://image.xzyd.net/66/image/editor/20131216/20131216141248.png);cursor: pointer;} </style> <script language="javascript" type="text/javascript"> //激发弹出弹窗的函数 function btnPop_onclick() { var cover = "<div id='Cover' onclick='btnClose_onclick()'></div>"; $("body").append(cover); var pop = "<div id='pop_cov'></div>"; $("body").append(pop); $("#pop_cov").append("<div class='Pop'>" +"<div class='btnClose' onclick='return btnClose_onclick()'> </div>" +"<div class=' popMain'><div style='padding:60px;'>带有蒙版的弹窗效果！</span></div></div></div>"); } //关闭弹窗的函数 function btnClose_onclick() { $("#Cover").remove(); $("#pop_cov").remove(); } </script> </head> <body> <!--主体层--> <h1>点击任意图片弹出弹窗，点击弹窗图片即可关闭弹窗</h1> <br /> <h3>弹窗弹出后，原窗体内容变暗，滚动鼠标滑轮，页面仍可滑动，但不可对原页面内容进行操作</h3> <h3>点击弹窗后，弹窗消失，页面恢复初始状态</h3> <div id="Body"> <img src="http://xzydv6.test.mall.zsb2cweb.com/66/image/ad/20131216/20131216100605.jpg" title='点击图片打开弹窗' onclick="return btnPop_onclick()"/> </div> </body> </html>