使用 jquery 加载动画以显示在特定 div 内

Question

每当发生 ajax 调用时，我都会使用 jQuery 显示加载图标，如下所示：

$body = $("body");
$(document).on({
  ajaxStart: function() { $body.addClass("loading");    },
  ajaxStop: function() { $body.removeClass("loading"); }    
});

.modal {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 ) 
    url('http://i.stack.imgur.com/FhHRx.gif') 
    50% 50% 
    no-repeat;
}
body.loading {
  overflow: hidden;   
}
body.loading .modal {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal"><!-- Place at bottom of page --></div>

每当发生 ajax 时，加载都很好，但很明显加载图标会显示在 body 中，隐藏 UI 在后面。而不是我想仅在该特定 div 内显示加载。在附加的 html 文件中，我想让加载显示仅在

"div id= box1"

Link to HTML File

Answer 1

vijayP 的评论是正确的方向。

必须修改 CSS，因为您将加载类限制为仅 body 元素。

.loading {
   overflow: hidden;   
}
.loading .modal {
   display: block;
}

然后在 JavaScript 中：

$(document).on({
  ajaxStart: function() { $("#box1").addClass("loading");    },
  ajaxStop:  function() { $("#box1").removeClass("loading"); }    
});

Answer 2

我已经对您的代码进行了一些编辑，希望您现在可以继续使用。

$body = $("body");
$(document).on({
  ajaxStart: function() { $body.addClass("loading");    },
  ajaxStop: function() { $body.removeClass("loading"); }    
});

.modal {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  /*background: rgba( 255, 255, 255, .8 ) 
    url('http://i.stack.imgur.com/FhHRx.gif') 
    50% 50% 
    no-repeat;*/
}
body.loading {
  overflow: hidden;   
}
body.loading .modal {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
<img src="http://i.stack.imgur.com/FhHRx.gif" />
<!-- Place at bottom of page --></div>