如何在等待ajax的响应时阻止用户的交互

Question

如何在等待ajax的响应时阻止用户的交互

场景如下:我正在使用Jquery来实现一些ajax功能.例如:当用户单击"获取数据"按钮时,Jquery将调用.ajax函数从服务器获取一些数据.这个过程可能需要一些时间,所以我添加了.ajaxSend和.ajaxComplete函数来显示等待进程的一些动画(实际上是一个带有z-index的div中的'Loading Data'gif:999是其中div的顶部).在等待过程中("加载数据"),我想阻止用户点击其他按钮(例如:我有其他标签,小'加载数据'gif下面的按钮).我实现这一目标的方式是:

    $("body").ajaxSend(function()
     {
        $(this).append('<div id="loading">Data Loading<\/div>');
        $("div#error").remove();
        $(this).children().not('#loading').css({'opacity':0.22});   
     });
    $("body").ajaxComplete(function()
     {
        $("div#loading").remove();
        $(this).children().not('#loading').css({'opacity':1});
     });

Run Code Online (Sandbox Code Playgroud)

但是,我不认为改变不透明度是最好的方法.除非您将不透明度设置为0,否则用户仍然可以单击其他按钮/选项卡.我不知道在这个过程中如何完全避免任何用户交互？谢谢!!