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 事件之前将整个页面（内容/正文）变为灰色的能力，就像它是一个模态（就像这个 @ 987654321@ 但没有对话框）

有没有办法做到这一点？

提前致谢

哈维尔 Q。

Answer 1

这样做的一种方法是使用覆盖整个页面的覆盖元素。如果覆盖元素具有半透明的背景颜色，它将使页面完全变灰：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();

摆脱它。

又快又脏。

Answer 3

尝试在“beforeSend”函数中添加叠加层：

$("body").prepend("<div class=\"overlay\"></div>");

$(".overlay").css({
    "position": "absolute", 
    "width": $(document).width(), 
    "height": $(document).height(),
    "z-index": 99999, 
}).fadeTo(0, 0.8);

Answer 4

这是我正在使用的完整解决方案：

以下是部分：

1. 用于叠加的 CSS。 “固定”用于覆盖整个页面内容，而不仅仅是屏幕高度和宽度。您可以使用背景颜色或 gif

2. 附加到 jQuery Ajax 调用的“beforeSend”事件。按需创建叠加层并显示它。

3. 请求完成后，它会从 DOM 中移除覆盖层

CSS：

.request-overlay {
    z-index: 9999;
    position: fixed; /*Important to cover the screen in case of scolling content*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}

JavaScript：

$.ajax({
                url: '/*your url*/',
                beforeSend: function () {
                    $('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
                    $("#requestOverlay").show();/*Show overlay*/
                },
                success: function (data) {
                    /*actions on success*/
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    /*actions on error*/
                complete: function () {
                    $("#requestOverlay").remove();/*Remove overlay*/
                }
            });

Answer 5

使用 jQuery ajaxStart() 将 Div 附加到您的文档中。使用某种形式的半透明文档将其设置为文档的大小。然后在ajaxStop() 上删除它。

Answer 6

var modal = $('<div>')
  .dialog({ modal: true });

modal.dialog('widget').hide();

setTimeout(function() { modal.dialog('close'); }, 2000); // to close it

这是一个演示：http://jsbin.com/avoyut/3/edit#javascript,html,live

别忘了致电modal.dialog('close'); 结束这一切！

通过这种方式，您可以获得实际对话框模式代码、调整大小、禁用等的好处。

希望这有助于 -ck