jQuery实现蒙层+分享提示图片

做HTML5页面的时候，经常会有提示用户分享的需求，一张蒙层上面加一张提示用户去分享的图片，有的时候可能会有一些文字，下面这个例子就是最简单的，平常开发的时候，如果有更复杂的，可以在这个基础上做修改。
HTML代码：

<!-- 用来点击的按钮 -->
<div class="reviewbtn">
    <a href="#" class="ashen_btn share">我要分享</a>
</div>

<!-- 用来显示的图片 -->
<div class="share_img">
    ![](images/share.png)
</div>

<!-- 最底下的蒙层 -->
<div class="bg"></div>

CSS代码：

.share_img {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  display: none;
}
.share_img img {
  width: 4.958333333333333rem;
  height: 2.0555555555555554rem;
}
.bg {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
}

JS代码：

<script type="text/javascript" src="js/jquery.js"></script>

$(document).ready(function() {
    $(".share").on("click", function() {
        $(".bg").show();
        $(".share_img").show();
    });
    $(".bg").on("click", function() {
        $(this).hide();
        $(".share_img").hide();
    });
});