Jquery - 如何禁用整个页面

Question

我有这个ajax事件

function save_response_with_ajax(t){
  var form = $('#edit_'+t);
  var div = $('#loading_'+t);
  $.ajax({
    url: form.attr("action"), 
    type: "POST",    
    data: form.serialize(), 
    cache: false,
    beforeSend: function(){
      form.hide();
      div.show();
    },
    complete: function(){
      div.hide();
      form.show();
    },
    success: function (result) {
    }       
  });
}

一切正常,但我想添加(如果可能的话)将整个页面(内容/正文)转换为灰色,而不是之前/完成ajax事件,就好像它是一个模态(如此http:// jqueryui.com/demos/dialog/#modal但没有对话框)

有办法做到这一点吗？

提前致谢

哈维尔Q.

Answer 1

这样做的一种方法是使用覆盖元素填充整个页面.如果overlay元素具有半透明背景颜色,则它会完全灰化页面:http://jsfiddle.net/SQdP8/1/.

给它一个高,z-index以便它在所有其他元素之上.这样,它正确呈现,并捕获所有事件(并且不会通过它们).

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}?

Answer 2

你可以试试

 $("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');

然后只需使用

$("#overlay").remove();

摆脱它。

又快又脏。