Jquery - 如何禁用整个页面 [英] Jquery - How to disable the entire page

问题描述

我有这个ajax事件

function save_response_with_ajax(t){var form = $('#edit_'+t);var div = $('#loading_'+t);$.ajax({url: form.attr("action"),类型:POST"，数据:form.serialize(),缓存:假，发送前:函数(){隐藏()；div.show();},完成:功能(){div.hide();表单.show();},成功:功能(结果){}});}

并且一切正常，但我想添加(如果可能的话)在/完成ajax事件之前将整个页面(内容/正文)变成灰色的能力，就像它是一个模态(像这样http://jqueryui.com/demos/dialog/#modal 但没有对话框)

有没有办法做到这一点?

提前致谢

哈维尔 Q.

解决方案

一种方法是使用覆盖整个页面的覆盖元素.如果覆盖元素具有半透明的背景颜色，它会使页面完全变灰:http://jsfiddle.net/SQdP8/1/.

给它一个高的 z-index 使它位于所有其他元素之上.这样，它就会正确呈现，并且会捕获所有事件(并且不会通过它们).

#overlay {背景颜色:rgba(0, 0, 0, 0.8);z-索引:999；位置:绝对；左:0；顶部:0；宽度:100%；高度:100%；显示:无；}

I have this ajax event

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

And everything works fine, but I want to add (if it's possible) the hability of turning the entire page (the content/body) into gray while before/complete ajax events, like if it were a modal (like this http://jqueryui.com/demos/dialog/#modal but without the dialog)

Is there a way of doing this?

Thanks in advance

Javier Q.

解决方案

A way of doing this is having an overlay element which fills the entire page. If the overlay element has a semi-transparent background color, it grays out the page completely: http://jsfiddle.net/SQdP8/1/.

Give it a high z-index so that it's on top of all other elements. That way, it renders correctly, and it catches all events (and won't pass them through).

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

这篇关于Jquery - 如何禁用整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！