jquery – 在等待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});
     });

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

解决方法

使用叠加层.

http://jqueryui.com/demos/dialog/#modal