it-swarm.com.ru

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 но без диалога)

Есть ли способ сделать это? 

Заранее спасибо

Хавьер В.

14
JavierQQ23

Один из способов сделать это - иметь наложенный элемент, который заполняет всю страницу. Если элемент наложения имеет полупрозрачный цвет фона, он полностью затеняет страницу: 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;
}​
40
pimvdb

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

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

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

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

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

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

3
JKirchartz

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

2
Chris

Попробуйте добавить оверлей во время функции beforeSend:

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

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

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

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

  1. CSS для наложения. «Фиксированный» используется для охвата всего содержимого страницы, а не только высоты и ширины экрана. Вы можете использовать цвет фона или GIF

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

  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*/
                }
            });
2
Tejasvi Hegde
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');, чтобы закончить все это!

таким образом, вы получаете преимущества реального модального кода диалога, изменения размера, отключения и т. д.

надеюсь, это поможет

1
ckozl

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

0
Charlie G

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

0
Shubh