ajax 요청시 사용자가 페이지와 상호 작용하지 못하도록하는 방법

Question

ajax를 사용하여 사용자가 내 페이지에서 무언가를 삭제할 수 있습니다.

페이지에서 아무 것도 클릭하지 못하게하는 데 사용할 수있는 html/css 트릭입니다. 어떤 인스턴트 메신저는 화면 가운데에 회 전자가있는 투명 오버레이의 일종입니다.

아약스에서는 beforesend 및 success 함수를 사용하여로드를 표시하고 숨길 수 있다는 것을 알고 있습니다.

$.ajax({ 
      beforeSend : function(){ 
      $('#loading').show(); 
      } 
      success: function (result) { 
      $('#loading').hide(); 


      } 

     }); 
    } 

필자는 이러한 스피너를 보았지만 사용자가 아무것도 클릭하지 못하도록하는 오버레이가 아니며 중앙에 있지 않습니다. http://projects.lukehaas.me/css-loaders/

Answer 1

사용자가 페이지의 아무 곳이나 클릭하지 못하게하려면 클릭 이벤트 처리기를 비활성화해야합니다.

document.oncontextmenu = new Function("return false"); //No right clicks 
 
document.onclick = new Function("return false"); //No left clicks

Answer 2

아약스 요청시 스피너를 포함하는 부트 스트랩 모달 전환 시도 :

스크립트를

function sendRequest(){ 
     $('#modal').modal('toggle'); 
     $.ajax({ 
     success: function (result) { 
      $('#modal').modal('hide'); 
     } 

    }); 

} 

HTML 다음은 그것을 막을 수있는 방법의 예입니다

<button id="clickButton" onclick="sendRequest()" class="buttonStyle">click me</button> 
<div class="modal fade" id="modal" tabindex="-1" role="dialog"> 
    <div class="loader"></div> 
</div><!-- /.modal --> 

Answer 3

CSS 솔루션 :

body.loading { 
 
    pointer-events: none; 
 
}

Answer 4

는 당신이 로더의 소스에서 볼 수 있듯이 LINK이 질문에 제공, CSS 로더는 사업부에 클래스를 적용함으로써 달성된다 . 예 : - 그래서

<div class="loader">Loading...</div> 

, 당신은 할 수 있습니다

.no-click { 
    pointer-events: none; 
} 

: 그리고

$.ajax({ 
    beforeSend : function(){ 
    $("#some_div_id").addClass("loader"); 
    }, 
    success: function (result) { 
    $("#some_div_id").removeClass("loader"); 
    } 
}); 

Answer 5

한 가지가 pointer-events CSS 속성을 사용하여 포인터 이벤트의 대상이되는 것을 요소를 방지한다 포인터 이벤트를받지 않아야하는 요소에이 클래스를 추가하기 만하면됩니다 (여기에는 모두 포인터 이벤트 (예 : mouseenter 및 01)가 포함됩니다.도 마찬가지 임). 예를 들어, 모든 포인터 상호 작용을 방지하기 위해 body 요소에이를 추가 할 수 있습니다 : 당신이 부트 스트랩을 사용할 수있는 경우

$.ajax({ 
    beforeSend: function() { 
     $("body").addClass("no-click"); 
    }, 
    success: function (result) { 
     $("body").removeClass("no-click"); 
    } 
});