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事件发生之前/完成时将整个页面（内容/正文）变成灰色的功能，就像它是模态的但没有对话框）

有办法吗？

提前致谢

Answer 1

一种方法是使用覆盖整个页面的overlay元素。如果overlay元素具有半透明的背景色，它将完全使页面变灰

给予较高的评价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;
}​