分享弹窗

Html部分

 <a id="HeadShare"> 分享 </a>

分享弹窗html文件

<style type="text/css">
   .window{width: 100%;background-color: #ebebeb;z-index:2;position: fixed;top:0;filter:alpha(opacity=50); -moz-opacity:0.5;  opacity:0.5;}
   .window_content>h5{color: #7f7f7f;font-size: 15px;margin-top: 15px;}
   .window_content{width:90%;height:280px ;margin:auto;z-index: 9999;position: fixed;top: 90px;left: 5%; text-align:center;background-color: #fafafa;border-radius:5px ;}
   .window_content a{color:#333333;}
   .window_content>p{color:#fff;position:absolute;top: 15px; right: 15px; padding-top:5px ;width: 30px;height: 30px;border-radius: 30px;background-color: #9c9c9c;font-size: 20px;}
   .window_content ul{margin-top: 45px;width: 100%;height: 300px;}
   .window_content li{float: left;padding-bottom: 20px;}
   .window_content li:nth-of-type(1){position: absolute;left: 5%;top: 55px;}
   .window_content li:nth-of-type(2){position: absolute;left: 38%;top: 55px;}
   .window_content li:nth-of-type(3){position: absolute;left: 71%;top: 58px;}
   .window_content li:nth-of-type(4){position: absolute;left: 5%;top: 170px;}
   .window_content li:nth-of-type(5){position: absolute;left: 38%;top: 170px;}
   .window_content li:nth-of-type(6){position: absolute;left: 71%;top: 173px;}
   .window_content a>img{width: 60px;}
   .bd_weixin_popup{position: fixed !important;top:100px !important;}
   .bd_weixin_popup_bg{position: fixed !important;top:100px !important;}
   .bdshare-button-style0-16 a{float: none !important;}
 .bdshare-button-style0-16 a{background-image: none !important; }   #bdshare_weixin_qrcode_dialog{height: 320px !important;}</style><div class="window" style="display:none;"></div><div class="window_content" style="display:none;">   <h5>分享至</h5>   <p id="delete">X</p>      <ul class="bdsharebuttonbox" data-tag="share_1">      <li><a href="#"><img class="bds_weixin" data-cmd="weixin" src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/images/vip/SmLogo1.png" /><p>微信好友</p></a></li>        <li><a href="#"><img class="bds_weixin" data-cmd="weixin" src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/images/vip/SmLogo2.png" /><p>微信朋友圈</p></a></li>        <li><a href="#"><img class="bds_tsina" data-cmd="tsina" src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/images/vip/SmLogo3.png" /><p>新浪微博</p></a></li>        <li><a href="#"><img class="bds_sqq" data-cmd="sqq" src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/images/vip/SmLogo4.png" /><p>QQ好友</p></a></li>        <li><a href="#"><img class="bds_qzone" data-cmd="qzone" src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/images/vip/SmLogo5.png" /><p>QQ空间</p></a></li>        <li><a href="#"><img class="bds_copy" data-cmd="copy" src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/images/vip/SmLogo6.png" /><p>复制链接</p></a></li>    </ul>                                                                 </div><script>   $(function(){           with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];      $(".window").css("height",$(window).height()+'px');            $("#HeadShare").click(function(){                 $(".window").css("display","block");         $(".window_content").css("display","block");      });      $("#delete").click(function(){         $(".window").css("display","none");          $(".window_content").css("display","none");//        $("#bdshare_weixin_qrcode_dialog_bg").css("display","none");      });   })</script>

 使用方法

在要使用分享弹窗的html加载分享文件，加入id="HeadShare"点击触发弹出窗口。  api接口： http://share.baidu.com/code/advance

注意事项：

分享弹窗点击微信分享，出现二维码会移动，如果想让二维码固定，加入几行css

   .bd_weixin_popup{position: fixed !important;top:100px !important;}
   .bd_weixin_popup_bg{position: fixed !important;top:100px !important;}