如何在jquery中显示加载器时阻止用户与底层用户界面的交互

How to blocks user interaction with the underlying user interface while show loader in jquery?

本文关键字：用户 交互 用户界面 jquery 显示 加载      更新时间：2023-09-26

这是我的加载器显示在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;    
}

我的问题是，用户可以与后台控件交互，而显示加载器。我不希望任何用户与控件交互。

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/

相关文章：