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

刚刚写了一篇关于 如何替换 WOOCOMMERCE 的 “加入购物车” 按钮 的文章。将加入购物车按钮的功能替换成一个可以点击后弹出我微信号图片的效果。那么今天 Forece 就来讲讲如何实现这个效果的。

简单来说，还是需要 Div、CSS、Javascript 的配合。使用的时候请自己拆分，CSS直接扔style文件里去，js直接在头部引用，html代码该扔哪就扔哪。

方法1：

<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>
<div id="light_qq" class="white_content"> 
    <img src='http://herecanada.com/qr.jpg' />  
</div>
<div id="light_weixin" class="white_content">  
    <img src='http://herecanada.com/qr.jpg' />  
</div>
<div id="fade" class="black_overlay"  onClick="closeWindow()">
</div>

<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>

<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>

演示效果

方法2：

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

  <span class="btn btn-pop">点击购买</span>
  <div class="pop">
    <img src='http://herecanada.com/qr.jpg' /> 
    <span class="btn close">关闭</span>
  </div>


<style>

.btn{
  display: inner-block;
  padding: 5px;
  border-radius: 1px;
  cursor: pointer;
}
.pop{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:  translate(-50%,-50%);
  display: none;
  padding: 10px;
}

</style>


<script>
var pop = $('.pop');
$('.btn-pop').on('click', function(e){
  e.stopPropagation();  
  pop.show();
});

$('.close').on('click', function(){
  pop.hide();
});
$(document).click(function(e){
  if(!pop.is(e.target) && pop.has(e.target).length === 0){
    pop.hide();
  }
});
</script>

演示效果