To put it simply, it is to mask and then load an animation. Above, it is more troublesome to use js to manually change the html value to realize the buffer animation. It feels that the cost performance is not high.
The main reason is to use the fixed attribute in position. After setting, other elements in the page cannot be clicked to ensure page security.
<!DOCTYPE html>
<html>
<head>
//The link file will not be written, just adjust it yourself
.cover {
text-align: center;
}
//The left and right attributes under position, as well as top and bottom, are used to control the position of the element whose position attribute is fixed through these four dimensions. You can practice the specific effect.
#layout {
text-align: center;
position:fixed;
left: 0;
right: 0;
display: none;
}
</style>
</head>
<body>
<div class="cover">
<a id="saveBtn" onclick="test()">Test button</a>
</div>
<div id="layout">
<img src="loading.gif" />
<p>Submitting, please wait. . . </p>
<button id="closeBtn" onclick="testBtn1()">关闭</button>
</div>
</body>
<script type="text/javascript">
function test(){
<span style="white-space:pre"> </span>//The value of opacity ranges from 0 to 1, the default is 1, the smaller the blurrier, the professional point is called transparency
$('.cover').css('opacity','0.2');
$('#layout').css('display','block');
};
//The following code in actual development can be added to the callback function of ajax
function testBtn1(){
$('.cover').css('opacity','');
$("#layout").css('display','none');
};
</script>
</html>