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。

- JavierQQ23

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;
}​

- pimvdb

---

它运行良好...但如果ajax事件没有完成...我可以点击那个背景，我想我必须编辑我的问题并问是否有一种方法可以避免用户在等待时点击其他地方...谢谢 :) - JavierQQ23

rgba()在任何IE < 9中都无法工作，因此覆盖层不会阻止任何点击，如果要使用rgba()，还需要一个默认值。 - ckozl

background-color: black; opacity: 0.8; 可能有效。对于 IE 浏览器，它只会是完全黑色的。 - pimvdb

为什么要使用 display:none？ - Merlin

在这里应该固定位置，因为如果你继续滚动，灰色遮罩会停留在页面顶部。 - Luka

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();

来摆脱它。

快速而简单。

- JKirchartz

---

你缺少了闭合引号，我已经纠正了，否则在最新的jQuery中append无法工作。 - Alex from Jitbit

我相信 .remove() 只能使用类选择器。 - Nemavhidi

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

- Ash Clarke

Answer 4

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

以下是各个部分：

1. 覆盖用的CSS。使用"fixed"来覆盖整个页面内容，而不仅仅是屏幕高度和宽度。您可以使用背景颜色或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*/
                }
            });

- Tejasvi Hegde

Answer 5

使用jQuery的ajaxStart()函数将一个Div附加到您的文档中。将其设置为半透明文档的大小，然后在ajaxStop()函数中将其删除。

- Chris

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

- ckozl

---

我做了这个： beforeSend: function(){ $('<div>') .dialog({ modal: true }) .dialog('widget') .hide(); }, 但好像什么也没有发生（它被阻止了，但灰色背景没有出现）。 - JavierQQ23

你有jQuery UI的CSS吗？这个CSS是否带有覆盖层？ - ckozl

现在它正在工作，但是在函数开头我声明了var modal = .....hide(); 并且在beforeSend: function(){ modal }, complete: function() { modal.dialog('close'); } 中，这样做正确吗？还是我说错了？谢谢。 - JavierQQ23

如果您查看编辑后的代码，我向您道歉，这展示了需要完成的内容。问题在于.dialog('widget')会更改链式返回。 - ckozl

Answer 7

今天我在寻找一种适用于所有IE浏览器的解决方案。我采用了@pimvdb和@Ash Clarke的代码，以及他提到的“background-color: black; opacity: 0.8;可能也有效果。对于IE来说，它将完全变黑。”的评论，并得出了以下解决方案：

$("#first-div").prepend("<div class=\"overlay-example\"></div>");

var height1 = $("#first-div").height();
var width1 = $("#first-div").width();

$(".overlay-example").css({
    "background-color": "black",
    "z-index": "9999999",
    "position": "absolute",
    "width": width1,
    "height": height1,
    "display": "none"
}).fadeTo(0, 0.0001);

在IE8，IE9以上进行了测试。无法检查IE7。如果您发现有误，我很乐意更新我的解决方案。(这也会帮助我更新我的解决方案:))

谢谢@pimvdb和@Ash Clarke

Demo

- Shubh

Answer 8

你可能想要给用户一些提示，让他们知道正在发生某些事情，而不仅仅是一个空白/灰色屏幕。我建议使用某种加载动画，例如参考this。

- Charlie G

---

实际上，有一个gif（div.show()），它会阻止表单中的单选按钮，但是当ajax事件开始时，我希望用户避免点击其他链接。 - JavierQQ23