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