Jquery - 如何禁用整个页面

时间:2012-02-23 15:58:21

标签: javascript css jquery-ui 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事件,就好像它是一个模态(如此{ {3}}但没有对话框)

有没有办法做到这一点?

提前致谢

Javier Q。

8 个答案:

答案 0 :(得分:41)

这样做的方法是使用覆盖整个页面的覆盖元素。如果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;
}​

答案 1 :(得分:3)

你可以尝试

 $("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');

然后只需使用

  

$( “#重叠”)除去();

摆脱它。

快速&amp;脏。

答案 2 :(得分:2)

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

答案 3 :(得分:2)

尝试在“beforeSend”功能期间添加叠加层:

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

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

答案 4 :(得分:2)

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

以下是各节:

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

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

  3. 完成请求后,它会从DOM

  4. 中删除叠加层

    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*/
                    }
                });
    

答案 5 :(得分:1)

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');来结束这一切!

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

希望这有助于确认

答案 6 :(得分:0)

您可能希望向用户提供某些事情的指示,而不仅仅是空白/灰色屏幕。我建议使用某种加载gif,例如this

答案 7 :(得分:0)

今天我一直在寻找适合所有IE浏览器的解决方案。我提到了@pimvdb@Ash Clarke的代码以及他提到 background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. 的评论,并在下面找到了解决方案:

$("#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