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

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

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

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

Приветствуются все предложения, рефералы и код сайта.

EDIT: Я не имею в виду "элемент управления прядильщиком". Я попытаюсь найти пример того, что я думаю о spinner.

РЕДАКТИРОВАТЬ: Что я имею в виду под "spinner" - это гигабайт загрузки, например, "Indicator Big" gif на этом веб-сайте: http://ajaxload.info/

Ответы

Ответ 1

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

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

Код:

#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, поэтому вы можете использовать jguery bgframe для решения этого вопроса, или то, что я делал в прошлом, - это просто скрыть элементы выбора при отображении div и показывая их снова, скрывая ваш div

Ответ 2

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

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

Ответ 3

Почему бы вам просто не использовать "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");
        });
    });

Ответ 4

Вы можете использовать что-то вроде этого кода 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') );
}

Ответ 5

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

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

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