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>