Как с помощью jQuery я могу выделить серым цветом и отключить веб-страницу, а затем показать поверх нее какой-то счетчик?

Когда дело касается веб-разработки и программирования javascript / jQuery, я все еще довольно "зелен", поэтому приветствую любую помощь. Вот что я хочу сделать.

  1. Я хочу сделать то же самое, что и диалоговое окно пользовательского интерфейса jQuery, когда оно помещает полупрозрачное изображение на всю страницу и отключает нажатие любого из элементов управления внизу.

  2. Я хочу знать, как я могу разместить сверху какой-нибудь счетчик, чтобы показать, что веб-сайт работает в фоновом режиме. Если бы я мог использовать анимированный файл GIF, это было бы хорошо, но я не совсем уверен, как лучше всего это подойти.

Вот пример неактивного эффекта с диалоговым окном: Пример пользовательского интерфейса jQuery. Я хочу знать, как добиться этого эффекта без диалогового окна наверху. У меня нет хорошего примера поведения прядильщика.

Мы приветствуем все предложения, ссылки на веб-сайты и код.

РЕДАКТИРОВАТЬ: Я не имею в виду "прядильщик". Я постараюсь найти пример того, о чем я думаю, используя спиннер.

РЕДАКТИРОВАТЬ: Под "прядильщиком" я подразумеваю загружаемый GIF-файл, подобный GIF-изображению "Большой индикатор" на этом веб-сайте: http://ajaxload.info/


overlay jquery-ui
person Mike Webb    schedule 19.11.2010    source источник
comment
Первый вопрос, который я хотел бы задать: почему? Зачем вам использовать такое нестандартное поведение в своем веб-приложении? Проблема, с которой я сталкиваюсь, когда люди начинают использовать jQuery, заключается в том, что они используют так много ненужной флэш-памяти, и похоже, что это может быть именно такой случай.   -  person Josh Smith    schedule 19.11.2010
comment
Я хочу знать, как добиться всего этого отчасти, чтобы расширить свои знания. Другая причина в том, что я хотел реализовать это, чтобы явно показать, что происходит. У меня сейчас есть небольшая страница (еще не в сети), которая при нажатии кнопки просто сидит без каких-либо уведомлений о том, что происходит, в то время как сервер делает то, что ему нужно. Если это неподходящий метод, что вы можете посоветовать, чтобы лучше выполнить мою задачу?   -  person Mike Webb    schedule 19.11.2010
comment
Имейте в виду, что я все еще хочу знать, как добиться всего этого. По крайней мере, чтобы узнать, как это сделать.   -  person Mike Webb    schedule 19.11.2010
comment
В этом случае уместно показать небольшой погрузчик. В качестве примера возьмем GitHub, который меняет стиль своей кнопки на кнопку «Загрузка ...» со счетчиком внутри нее; это хороший подход. Чаще всего просто заменяют кнопку маленькой вертушкой. Я делаю это с помощью специального счетчика: static.goalscdn.com/img/goalsspinner.gif. Но взаимодействие затененного фона подходит для модальных окон, а не для этого варианта использования, где это, вероятно, будет неприятно для конечного пользователя.   -  person Josh Smith    schedule 19.11.2010

Ответы (5)


arrow_upward
34
arrow_downward

Один из способов сделать это - иметь div, который по умолчанию скрыт и имеет свойства для установки серого цвета фона (например, # 666), а его прозрачность установлена ​​примерно на 0,8.

Если вы хотите отобразить, используйте jQuery, чтобы получить размер экрана / окна браузера, установите размер вашего div и отобразите его с высоким zindex, чтобы он отображался сверху. Вы также можете передать этому div свою графику в формате gif-spinner (без повтора и по центру).

Код:

#json-overlay {
    background-color: #333;
    opacity: 0.8;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url('ajax-loader.gif');
    background-position: center;
    background-repeat: no-repeat;
}

Единственное, на что следует обратить внимание, - это элементы выбора в IE6, поскольку они будут отображаться через div, поэтому вы можете либо использовать jQuery bgframe для решения этой проблемы, либо то, что я делал в прошлом, просто скрывает элементы выбора при отображении div и отображении их снова при скрытии вашего div

person mikeq    schedule 19.11.2010
comment
Спасибо. Кажется, это лучший способ справиться с этим. - person Mike Webb; 01.12.2010
comment
Я нашел одну проблему с решением. если высота моей страницы больше высоты окна, то нижняя часть не покрывается стилем. как я могу этого добиться? Я пытаюсь использовать изображение загрузки вызова ajax .... - person karim_fci; 08.12.2015

arrow_upward
58
arrow_downward

Мне всегда нравится использовать плагин jQuery BlockUI: http://malsup.com/jquery/block/

Посмотрите демоверсии, вы, вероятно, найдете там то, что ищете.

person WillCodeForCoffee    schedule 19.11.2010
comment
+1 за предложение BlockUI; это действительно просто в использовании. Спасибо за совет! - person jah; 02.05.2011
comment
это НАСТОЛЬКО проще, чем то, что я взламывал за последние 3 часа, лол, спасибо - person Thousand; 28.03.2013
comment
хороший инструмент, мне он понравился + 1 - person soorapadman; 14.07.2016

arrow_upward
3
arrow_downward

Почему бы вам просто не использовать "modal: true"?

    $(function () {
        $("#dialog").dialog($.extend({}, dialogOptions, {
            autoOpen: false,
            width: 500,
            modal: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            }
        }));

        $("#profile_edit").click(function () {
            $("#dialog").dialog("open");
        });

        $("#save_and_close").click(function () {
            $("#dialog").dialog("close");
        });
    });
person mila    schedule 28.08.2013
comment
Да, я могу подтвердить, что это работает с более новыми версиями JQuery. Если вы не хотите загружать BlockUI, это самый простой вариант. Хотя нет изображения прядильщика - person andy boot; 17.10.2013
comment
Пользовательский интерфейс jquery - это не jquery, это огромный набор кода поверх. Не все этого хотят - person John; 20.07.2017
comment
Что такое dialogOptions? - person Nathan B; 30.07.2020

arrow_upward
2
arrow_downward

Вы можете использовать что-то вроде этого кода jquery. Передайте идентификатор элемента, который вы хотите оставить вверху страницы:

function startModal(id) {
    $("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
    $("#PopupMask").css('opacity', 0.5);  
    $("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
    $("#"+id).data('savePosition', $("#"+id).css( "position"));
    $("#"+id).css( "z-index" , 11 );
    $("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
    if ($("#PopupMask") == null) return;
    $("#PopupMask").remove();
    $("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
    $("#"+id).css( "position" , $("#"+id).data('savePosition') );
}
person Renzo Ciot    schedule 11.07.2014

arrow_upward
1
arrow_downward

вы можете использовать простой div, а затем событие ajaxstart и ajaxstop

<div id="cover"></div>

$('#cover')
    .hide()
    .ajaxStart(function () {
        $(this).fadeIn(100);
    })
    .ajaxStop(function () {
        $(this).fadeOut(100);
    });
person Rupesh    schedule 15.05.2015