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.

Ответы

Ответ 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;
}​

Ответ 2

Используйте jQuery ajaxStart(), чтобы добавить Div к вашему документу. Задайте размер документа в виде полупрозрачного документа. Затем удалите его на ajaxStop().

Ответ 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);

Ответ 4

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

Ответ 5

вы можете попробовать

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

то просто используйте

$( "# оверлей" ) удалить();.

чтобы избавиться от него.

быстро и грязно.

Ответ 6

Это полное решение, которое я использую:

Ниже приведены разделы:

  • CSS для наложения. "fixed" используется для охвата всего содержимого страницы, а не только высоты экрана и ширины. Вы можете использовать цвет фона или gif

  • Прилагается к событию "beforeSend" вызова jQuery Ajax. Создает наложение по требованию и показывает его.

  • По завершении запроса он удаляет наложение из 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*/
                }
            });

Ответ 7

Вы можете указать пользователю, что что-то происходит, а не просто пустой/серый экран. Я бы предложил какую-то загрузку gif, например, this.

Ответ 8

Сегодня я искал решение, которое будет работать для всех браузеров 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