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

Question

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

Если вы хотите отобразить, используйте jQuery, чтобы получить размер окна экрана / браузера, установите размер вашего div и отобразите его с высоким zindex, чтобы он отображался сверху.Вы также можете дать этому div свою графику 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 нужно только следить за элементами select, так как они будут показываться через div, поэтому вы можете использовать jQuery bgframe.Чтобы решить это, или то, что я сделал в прошлом, просто скрыть элементы select при отображении div и показывать их снова при скрытии вашего div

Answer 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");
        });
    });

Answer 4

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

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

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

Answer 5

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