jQuery 比较方便就是创建删除了，所以创建一个弹出层就是当点击div的时候创建一个新的div利用绝对定位和z-index覆盖body 并利用opacity设置其透明度，然后在新的div上关联一个单击事件并执行remove，一个比较有意思的问题是iframe 中src的设置，这个可以用同胞的方法获取。比如说
原来是<a href=""><img src="" ></a>
若要弹出效果 可以<div><img src="" ><a href=""></a></div> 简单说就是把a标签放到到附近当生成新的层的时候通过同胞后代的方法获取a标签的href设置iframe 的src。
贴一段代码 当点击红色区域的时候iframe变化，
<!DOCTYPE html> <html> <head> <style type="text/css"> #yiceng{background-color: gray; padding: 20px; height:2000px; width:1000px; } #guanbi{margin: 30px 120px 0px 120px; height:300px; width:1000px; background-color:red; text-align:center; } .zhanshiqu{margin: 20px; height:800px; width:600px; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#guanbi").click(function(){ var xin=$(".ceshi img").next().attr("href"); $("iframe").attr("src",xin); }); }); </script> </head> <body><div class="ceshi"><img src="http://www.ifangtuan.com/data/files/mall/xiangce/131104/201311040923523798.png"><a id="myAnchor" href="http://www.ifangtuan.com/index.php?app=news" target="view_frame">Microsoft</a></div> <div id="yiceng"><div id="guanbi"><iframe src="http://www.ifangtuan.com/index.php?app=goods&act=views&id=442&cate_id=1" class="zhanshiqu" name="view_frame"></iframe></div></div> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>删除 div 元素</button> </body> </html>
原文：http://www.cnblogs.com/majin/p/3656112.html