Ajaxのリクエストに応じてページを無効にする方法

Question

こんにちは、私の要件は、ショーのローディングスピナーとページが無効とAjaxリクエストが、私が含まれている。このために送信される非クリッカブル取得することです上記のコードスニペットAJAXでコード

$('#expressShippingCalculation input').change -> 
if $('#shipping_method4').is(':checked') 
    additionalAmountExpress() 
    data = $('#shippingDetails').serialize() 
    expressValue = true 
else 
    $('#additional-charge').hide() 
    expressValue = false 
$.ajax 
    url: '/update_express_shipping?expressShipping=' +expressValue 
    type: 'PATCH' 
return 

$(document).ajaxStart -> 
    $('#spinner').show() 
    return 
$(document).ajaxComplete -> 
    $('#spinner').hide() 
    return 
$(document).ajaxError -> 
    $('#spinner').hide() 
    return 

与えられましたローダーが動作していますが、スピナーがロードされているときに私のページが無効にならないajaxが読み込まれているときにページを無効にする方法を教えてください。

Answer 1

はAjaxのレスポンスまで、スピナーを表示するためのサンプルコードです：

HTMLスピナーコード：

<div id="loading-overlay"> 
    <div class="loading-icon"></div> 
</div> 

はCSS：

#loading-overlay { 
    position: absolute; 
    width: 100%; 
    height:100%; 
    left: 0; 
    top: 0; 
    display: none; 
    align-items: center; 
    background-color: #000; 
    z-index: 999; 
    opacity: 0.5; 
} 
.loading-icon{ position:absolute;border-top:2px solid #fff;border-right:2px solid #fff;border-bottom:2px solid #fff;border-left:2px solid #767676;border-radius:25px;width:25px;height:25px;margin:0 auto;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;z-index:4;-webkit-animation:spin 1s linear infinite;-moz-animation:spin 1s linear infinite;animation:spin 1s linear infinite;} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

AJAX：

$.ajax({ 
     url: "YOUR PATH" 
     type: "PATCH", 
     data: "YOUR DATA HERE", 
     beforeSend: function(){ 
      $("#loading-overlay").show(); 
     }, 
     success: function (data, textStatus, jqXHR) { 
      $("#loading-overlay").hide(); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      $("#loading-overlay").hide(); 
      alert("something went wrong"); 
     } 
    }); 

Answer 2

「オーバーレイ」要素を追加して、画面全体を覆い、visibleプロパティをfalseに設定し、ajax startで有効にすることができます。ここで