DIV+JS+CSS实现点击弹出图片效果

先看效果

公司官网要重新设计，加入了一点特效；为了方便手机浏览的时候关注我们的公众号，需要在用户点击网站上的图标时弹出公众号的二维码。我主要做后端，现在被拉来做前端，各种不会，好在网络没有断，让我找到了一个功能非常类似的博文。整个过程参考了最基本的js与css 控制弹出层效果，完成后的效果如下，后面会列出代码：

#代码

CSS代码

<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ffffff;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 30%;
background-color: white;
z-index:1002; /* 数字的大小指明了div的相对层，数字大的在上层 */
overflow: auto;
}
</style>

js代码

<script  type="text/javascript">
function openWindow(obj){
var qq_or_weixin = "light_qq";
switch(obj.id)
{
case 'contact_weixin':
qq_or_weixin = "light_weixin";
break;

case 'contact_qq':
qq_or_weixin = "light_qq";
break;
}
document.getElementById(qq_or_weixin).style.display='block';
document.getElementById('fade').style.display='block';
}
function closeWindow(){
document.getElementById('light_weixin').style.display='none';
document.getElementById('light_qq').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>

页面代码

<div class="top_contact_us">
<div class="top_telphone"></div>
<div class="top_weixin"><a href="#" id="contact_weixin" onclick="openWindow(this)">微信公众号</a></div>
<div class="top_qq"><a href="#" id="contact_qq" onclick="openWindow(this)">官方答疑群</a></div>
</div>
<div id="light_qq" class="white_content">
<img src='img/qq_erweima.png' />
</div>
<div id="light_weixin" class="white_content">
<img src='img/weixin_erweima.png' />
</div>
<div id="fade" class="black_overlay"  onClick="closeWindow()">
</div>