javascript - 如何在 jquery 中显示加载程序时阻止用户与底层用户界面的交互？

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;    
}

我的问题是用户可以在显示加载程序时与后台控件交互。我不希望用户与控件进行任何交互。提前致谢。

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/