<div class="cover fail">
            <div class="cover-box">
                <img class="cover-bg" src="images/tankuang1.png" alt="">
                <div class="cover-text">
                    <p>你还没有提交信息哦~ </p>
                    <p>这份月饼您不要了吗？</p>
                </div>
            </div>
     </div>

css:原理就是最大的盒子是遮罩层，然后给他fixed定位，并让他占满全屏，背景用rgba；弹框的话就是给相对定位，因为里面的图片文字都是绝对定位，弹框的背景图可以用图片来展示。

.cover{
    background:#000;
    background: rgba(0,0,0,0.5);
    filter: alpha(opacity=50);/**这个是为IE6设的，可取值在0-100***/
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    color: #fff;
    display: none;
}
.cover-box{
    width: 80%;
    position: relative;
    top:35%;
    left: 10%;
    text-align: center;
}
.cover-bg{
    display: block;
    width: 100%;
    max-width: 480px;
    margin:0 auto;
}
.cover-title{
    width: 100%;
    max-width: 480px;
    font-size:1.9rem;
    position: absolute;
    top:42%;
    height: 2rem;
    line-height: 2rem;
}

.cover-text{
    width: 100%;
    max-width: 480px;
    position: absolute;
    top:57%;
    line-height: 1.8;
    font-size:1.4rem;
}

js

   $('.cover').on('click', function () {
            $('.cover').stop().hide();
      })//这个是点击遮罩层就关闭