загрузки анимации с помощью JQuery для отображения внутри определенного DIV

Question

Я отображая значок загрузки с помощью JQuery всякий раз, когда Ajax вызова происходит, как показано ниже:

$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 имеет место, но очевидно, что значок загрузки будет отображаться в теле, скрывающем интерфейс пользователя сзади. Вместо этого я хочу отображать загрузку только внутри этого конкретного 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>