手机端微信点击弹出分享引导遮罩层

admin

在微信运营过程中，引导分享转发是一个很重要的操作，关系到你的粉丝数量的增加与内容转化的效果。手机端微信点击弹出分享引导遮罩层在微信开发中也经常需要用到。以下为一个完整的分享代码：

1. <html>  
   
2. <head>  
   
3. <meta charset="utf-8">  
   
4. </head>  
   
5. <style>  
   
6. #shareit {  
   
7.   -webkit-user-select: none;  
   
8.   display: none;  
   
9.   position: absolute;  
   
10.   width: 100%;  
    
11.   height: 100%;  
    
12.   background: rgba(0,0,0,0.85);  
    
13.   text-align: center;  
    
14.   top: 0;  
    
15.   left: 0;  
    
16.   z-index: 105;  
    
17. }  
    
18. #shareit img {  
    
19.   max-width: 100%;  
    
20. }  
    
21. .arrow {  
    
22.   position: absolute;  
    
23.   right: 10%;  
    
24.   top: 5%;  
    
25. }  
    
26. #share-text {  
    
27.   margin-top: 400px;  
    
28. }  
    
29. </style>  
    
30. </head>  
    
31. <body>  
    
32. <a id="share_btn" href="####">分享到朋友圈</a>  
    
33. <div id="shareit">  
    
34.   <img class="arrow" src="http://dev.vxtong.com/cases/nuannan/imgs/share-it.png">  
    
35.   <a href="#" id="follow">  
    
36.     <img id="share-text" src="http://dev.vxtong.com/cases/nuannan/imgs/share-text.png">  
    
37.   </a>  
    
38. </div>  
    
39. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>  
    
40. <script>  
    
41.   //立即分享到微信朋友圈点击事件  
    
42.   $("#share_btn").on("click", function() {  
    
43.       $("#shareit").show();  
    
44.   });  
    
45.      
    
46.      
    
47.   $("#shareit").on("click", function(){  
    
48.     $("#shareit").hide();   
    
49.   });  
    
50. </script>  
    
51. </body>  
    
52. </html>

复制代码

就这样写。