- 用到提交按钮时,有时候代码运行比较慢,如果重复点提交,可能重复请求会导致不理想的情况,为避免重复的请求以致出现问题,需要用着遮罩,达到只进行一次提交请求
效果:
JSP:
<a class="btn" href="javascript:void(0);" id="submit">提交</a>
<div class="lately-buy hideview">
<div class="load-sibin"></div>
<div class="loading-load-lately-buy">
//图片路径
<img src="。。。/loadinfo.gif">
</div>
</div>
CSS:
.loading-load-lately-buy, .loading-load-sq, .loading-login {
position: fixed;
display: none;
width: 33%;
height: 20%;
line-height: 0.9375rem;
text-align: center;
border-radius: 0.2rem;
left: 47.5%;
top: 50%;
z-index: 1000;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
font-size: 14px;
}
.lately-buy, .modal-load-sq, .modal-login {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.25);
background: #000;
opacity: 0.3;
filter: alpha(opacity=30);
}
.load-sibin {
width: 100%;
height: 100%;
background:#000;
opacity: 0.3;
filter: alpha(opacity=30);
}
.loading-load-lately-buy, .loading-load-sq, .loading-login {
line-height: 0.9375rem;
text-align: center;
color:#fff;
font-size: 14px;
}
JS:
$("#submit").click(function() {
$(".hideview").show();
$(".loading-load-lately-buy").show();
}