表单提交loading加载提示效果

最新推荐文章于 2024-04-16 10:10:01 发布

DunDunM

最新推荐文章于 2024-04-16 10:10:01 发布

阅读量3.9k

点赞数

转自大神：https://blog.csdn.net/Denglishang/article/details/81283540

页面：这个div与其他内容的div平级

在这里插入图片描述
CSS

.submit_loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    background-color: #000;
    text-align: center;    
    opacity: 0.3;
 }
.loading_show {
    margin-top: 15%;
 }
    
.loading_context {
   margin-top:1%;
   color: #fff;
   font-size:11pt;
   font-family:"微软雅黑";
 }

function Mask() {
    $('#loading').css({ 'display': 'block' });
}
 function UnMask() {
  $('#loading').css({ 'display': 'none' });
 }

AJAX调用

function CheckBatch() {
     Mask();
     $.ajax({
      url:？？？？？,
      datatype: "json",
      data: { },
      success: function (msg) { UnMask();}
      error: function (msg) {  UnMask();}
     });
}

效果图：

洗头头