jquery - ajax 异步调用服务器期间 jquery 对话框中的透明背景

Question

我有一个 jquery 对话框，其中包含许多输入字段和一个提交按钮。提交表单时，将向服务器触发 ajax 调用，在此期间我需要将对话框的背景设置为透明，此时提交按钮应更改为 ajax 加载图像。

请注意ajax函数内的注释部分。

我的代码在这里:http://jsfiddle.net/inDiscover/9396Z/

重要的代码。

$.ajax({
    url:'some url path',
    type:'GET',
    data:{isPDF:0},                                         
    success:function(data,textStatus,xhr)
    {
        setTimeout(function (){
        // I need some logic to implement here to make a transparent background
        // (so that user cant do any thing on background). Also I need to change
        // the submit button to an ajax loading image.                      
        },2000);

        (event.preventDefault) ? event.preventDefault() : event.returnValue = false;                                
        $("#prnt_info_sbmt").click();                   
    },              
    error:function(xhr,textStatus,errorThrown)
    {
        alert(errorThrown); 
    }
});

任何人都可以指导我使这成为可能吗？非常感谢您及时的帮助。

提前致谢。

Answer 1

这是一个非常简单的方法:my fiddle fork

主要思想是用图像替换按钮内的 html，同时在表单上覆盖一个空 div。

相关JS:

setTimeout(function (){
    $(".ui-dialog-buttonset .ui-button").html("<img src='http://placekitten.com/g/65/38'/>")
        .attr("disable", "disabled");
    $("#popup").append("<div class='sheen'/>");
},2000);

CSS:

.sheen {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background: rgba(255, 255, 255, 0.75);
}