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

先看效果

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

代码

---

CSS代码

<style type="text/css">
      .black_overlay{
         display: none; 
         position: absolute;  
         top: 0%;  
         left: 0%;  
          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>