<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設(shè)的，可取值在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();
})//這個是點擊遮罩層就關(guān)閉
