简单的弹窗遮罩实现

HTML代码，mask是一个带黑色背景的遮罩层。

  <!-- 删除提示框 -->
    <div class="mask"></div>
       <div class="tipDel">
           <p class="tips">确定要删除该商品吗?</p>
           <p class="chearfix">
               <a class="f1 cer" href="#">确定</a>
               <a class="fr cancel" href="#">取消</a>
           </p>
       </div>

CSS代码如下;

 

  .mask{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        display: none;
       }
       .tipDel{
 
        width: 500px;
        height: 200px;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margi