微信分享遮罩層

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/Yasha009/article/details/51996368

在自定義微信分享時有時想要更加人性化的去提示用戶，所以增加遮罩層。

下面就我做過的案例進行講解：（效果圖）

(順便說一句， CSDN有點坑啊，上傳圖片必須通過添加上傳圖片，這樣默認會有CSDN的水印；如果直接粘貼到編輯框裏保存完後圖片消失！)

JSP: 遮罩層圖片

    <!--彈出層結束-->
    <div id ="shareDiv" style="z-index: 999;" class="shareDiv"><img src="static/shippingCourseMobile/image/shareText.png" width="90%">
    	<span id="closeX">X</span>
    </div>

JS: 在頁面點擊id爲coverPic的元素打開遮罩層，輕觸關閉遮罩層

        //分享遮罩層
        $("#coverPic").click(function(){
            $(".title").hide();
        	$("#shareDiv").show();
            $('body').animate({scrollTop:0},100);
            $("#shareDiv").show();
            $("#closeX").show();
        	
        });
        
        //點擊隱藏遮罩層
        $("#shareDiv").click(function(){
        	$(this).hide();
            $(".title").show();
            $("#closeX").hide();
        });