jQuery 比较方便就是创建删除了，所以创建一个弹出层就是当点击div的时候创建一个新的div利用固定位fixed（与浏览器窗口有关）和z-index覆盖body 并利用opacity设置其透明度产生新层，绝对定位absolute（已定位祖先元素有关）实现布局，然后在新的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>