css 点击打开遮罩

<div>
  <nav class="bar bar-tab">
    <a class="tab-item external" href="#">
      <div class="tab-flex">
        <img src="/src/assets/images/massage.png">
        <span class="tab-label" id="share">分享</span>
      </div>
    </a>
    <a class="tab-item external tab-mar" href="#">
      <div class="m-nav-span"><span class="tab-label">参会报名</span></div>
    </a>
    <a class="tab-item external tab-mar" href="#">
      <div class="m-nav-span"><span class="tab-label">参会报名</span></div>
    </a>
<!--    <a class="tab-item external tab-mar" href="#">-->
<!--      <div class="m-nav-span"><span class="tab-label">参会报名</span></div>-->
<!--    </a>-->
  </nav>
</div>
<!-- 底部透明灰色层 -->
<div class='mask'></div>

<!-- 二维码层 -->
<div class='board'>
   <div class="board-flex">
     <div class="share-content-m">
       <img src="/src/assets/images/weixin.png" alt="微信" class="share-image">
       <span class="share-m-span">微信</span>
     </div>
     <div class="share-content-m">
       <img src="/src/assets/images/qq.png" alt="qq" class="share-image">
       <span class="share-m-span">QQ</span>
     </div>
     <div class="share-content-m">
       <img src="/src/assets/images/weibo.png" alt="微博" class="share-image">
       <span class="share-m-span">微博</span>
     </div>
   </div>
   <div class="board-footer">
     <span class="cancel">取消</span>
   </div>
</div>
<script>
  $("#share").click(function(){
    $('.mask').css('display','block');
    $('.board').css('display','block');
  });
  $('.cancel').click(function(){
    $('.mask').css('display','none');
    $('.board').css('display','none');
  });
</script>
<style>
  /* 透明灰色层 */
  .mask {
    position: fixed; top: ; left: ; z-index: ;
    width: %; height: %; display: none;
    background-color: rgba(,,,); opacity: 0.51; overflow: hidden;
  }
  /* 分享类型 */
  .board {
    position: fixed;
    background:rgba(,,,);
    bottom: %;
    left: %;
    width: %;
    height: .1rem;
    z-index: ;
    display: none;
  }
  .board-flex {
     height: .05rem;
     width: %;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     line-height: .05rem;
  }
  .cancel {
    width:32px;
    height:22px;
    font-size:16px;
    font-family:PingFangSCMedium;
    color:rgba(,,,);
    line-height:22px;
  }
  .board-footer {
     height: 3rem;
     line-height: 3rem;
     text-align: center;
  }
  .share-content-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .share-m-span {
    width:.3rem;
    height:.17rem;
    font-size:.6rem;
    font-family:PingFangTC-Medium,PingFangTC;
    font-weight:bold;
    color:rgba(,,,);
    line-height:.17rem;
    letter-spacing:1px;
    text-align: center;
  }
</style>

效果：