Jquery – 如何禁用整个页面
我有这个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.
这样做的一种方法是使用覆盖元素来填充整个页面。 如果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; }
尝试在“beforeSend”function期间添加叠加层：
$("body").prepend(""); $(".overlay").css({ "position": "absolute", "width": $(document).width(), "height": $(document).height(), "z-index": 99999, }).fadeTo(0, 0.8);
使用jQuery ajaxStart()将Div附加到文档中。 使用某种forms的半透明文档将其设置为文档的大小。 然后在ajaxStop()上删除它。
var modal = $('') .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'); 结束一切！
通过这种方式，您可以获得实际对话模式代码，resize，禁用等的好处。
希望这会有所帮助
你可以试试
$("body").append('
这是我正在使用的完整解决方案：
以下是部分：
-
用于叠加的CSS。 “fixed”用于覆盖整个页面内容，而不仅仅是屏幕高度和宽度。 您可以使用背景颜色或gif
-
附加到jQuery Ajax调用的“beforeSend”事件。 根据需要创建叠加并显示它。
-
完成请求后，它将从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(''); /*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*/ } });
您可能希望向用户提供某些事情的指示，而不仅仅是空白/灰色屏幕。 我会建议某种加载gif，例如，看看这个 。
今天我一直在寻找适合所有IE浏览器的解决方案。 我拿了@pimvdb和@Ash Clarke的代码以及他的评论，他提到了background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. 并在下面找到了解决方案：
$("#first-div").prepend(""); 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
演示