弹出层iframe链接设置

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>