做HTML5頁面的時候，經常會有提示用戶分享的需求，一張蒙層上面加一張?zhí)崾居脩羧シ窒淼膱D片，有的時候可能會有一些文字，下面這個例子就是最簡單的，平常開發(fā)的時候，如果有更復雜的，可以在這個基礎上做修改。
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();
    });
});