jqueryでshow loaderを実行しているときに、基礎となるユーザーインターフェイスとのユーザーのやりとりをブロックする方法はありますか？

Question

ここに私のローダだがajaxstartでのショーです：

$(document).ajaxStart(function() { 
         $("#wait").css("display", "block"); 
        }); 
        $(document).ajaxComplete(function() { 
         $("#wait").css("display", "none"); 
        }); 

のCss：

.wait {  
    display:none; 
    position:fixed; 
    z-index:1000; 
    width:400px; 
    height:400px;  
    top:20%; 
    left:35%; 
    padding:2px;  
} 

私の問題は、ユーザーが任意のユーザーを望んでいないloader.iを表示しながら、バックグラウンドコントロールと相互作用することができることができていますコントロールとの相互作用。 ありがとうございます。

Answer 1

のCss

.preloader-container { 
    position: fixed; 
    z-index: 1031; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: transparent; 
    display: block; 
    overflow: hidden; 
    padding: 25%; 
} 

.preloader-center { 
    position: absolute; 
    padding: 15px; 
    top: 10%; 
    left:30%; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    background: transparent; 
    z-index: 1000; 
    font-size: 60px; 
} 

Javascriptを

function showLoader(container){ 
     var html = '<div class="preloader-container js-busy-loader"><div class="preloader-center"><img src="http://i49.tinypic.com/j5z8mb.gif"></div></div>'; 
       $(container).find(".js-ajax-loader,.js-busy-loader").remove(); 
       $(container).append(html); 
    } 

    function hideLoader(container){ 
      if(typeof container == 'string' && container!==''){ 
       $(container).find(".s-ajax-loader,.js-busy-loader").remove(); 
      }else{ 
       $("body").find(".s-ajax-loader,.js-busy-loader").remove(); 
      } 
    } 

例：！https://jsfiddle.net/h1wpmxs0/