随笔 - 27  文章 - 1 评论 - 1 trackbacks - 0

先看效果

公司官网要重新设计,加入了一点特效;为了方便手机浏览的时候关注我们的公众号,需要在用户点击网站上的图标时弹出公众号的二维码。我主要做后端,现在被拉来做前端,各种不会,好在网络没有断,让我找到了一个功能非常类似的博文。整个过程参考了最基本的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>
posted on 2015-04-25 17:52  饭前码字  阅读(...)  评论(... 编辑 收藏