Как определить, где находится текущее видимое вертикальное положение внутри диалогового окна jquery?

У меня есть случай, когда я использую jquery ui dialog, и у меня есть таблица html в диалог, в котором зафиксирована высота:

$("#modalDialogContainer").dialog({
    resizable: false,
    height: 700,
    autoOpen: false,
    width: 1050,
    modal: true,

Я вызываю AJAX запрос нажатием кнопки, и я хочу использовать jquery UI blockUI plugin, чтобы показать сообщение "загрузка". Что-то вроде этого:

   $("#myTableInsideDialog").block({
                css: {
                    top: '200px',
                    bottom: "",
                    left: ''
                },
                centerY: false, baseZ: 2000, message: $("#SavingMessage")
            });

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

Наличие полосы прокрутки в порядке (это на самом деле то, что я хочу), но эффект детонации заключается в том, что из-за этого в зависимости от того, прокручивается ли пользователь или нет, сообщение blockUI не центрируется (или даже видимо на экране) по вертикали.

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

Выше, поскольку вы можете видеть, что его жестко закодированный, чтобы быть 200px сверху, так что он отлично работает, если пользователь не прокручивается вниз, но вы не видите сообщение, если пользователь прокрутил весь путь

Короче говоря, если я нахожусь наверху прокрутки, тогда у меня будет следующее:

$("#myTableInsideDialog").block({
            css: {
                top: '200px',
                bottom: "",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

Если я нахожусь в нижней части прокрутки, тогда я бы хотел:

 $("#myTableInsideDialog").block({
            css: {
                top: '',
                bottom: "200px",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

Ответ 1

Я бы не чередовал свойства top и bottom:

Для размера окна 1000px, top:800 == bottom:200

Важным вопросом является то, как вы можете узнать расстояние прокрутки от вершины. Для этого можно использовать функцию:

function calcTopLocal() {
        var s = $('#modalDialogContainer').scrollTop() + 'px';
        return s;
}

Теперь, чтобы применить его к вашему блоку:

 $("#myTableInsideDialog").block({
            css: {
                top: calcTopLocal()
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

Это может быть реорганизовано многими способами. Значительная деталь использует scrollTop() и применяет стиль.

ответ на MKaama:

В моем предлагаемом ответе нет циклов, нет таймеров и нет предложений о повторных действиях. Нет

Повторное вызов функции js только для того, чтобы сохранить фиксированную позицию, является излишним, потери процессора

Ответ 2

Если вы хотите добавить сообщение загрузки, когда ajax запрашивает данные, вы можете добавить <div> в диалоговом окне, содержащем сообщение, которое вы хотите отобразить. Затем вы можете применить relative position к dialog и absolute position к <div>, а с margin:auto div всегда находится в центре диалога, даже если вы прокрутите диалог.

jsFiddle demo

$("#modalDialogContainer").dialog({
    resizable: true,
    height: 300,
    autoOpen: true,
    width: 300,
    modal: true,
    buttons: {
        'call ajax': function(){
            // insert the loading div to the dialog
            $(this).parent().append("<div class='loading' />");

            $.ajax({
                type: 'json',
                url:  'jsonRequest.php',
                complete: function(){
                    // remove the loading div
                    $('.loading').remove();    
                },
                success: function(){
                    //do what you want
                }
            });
        }
    }
});

Файл CSS должен выглядеть примерно так:

#modalDialogContainer{
    position: relative;
}

#myTableInsideDialog{
    height: 1000px;
    width:  100%;
}

.loading{
    position: absolute;
    top:      0px;
    bottom:   0px;
    left:     0px;
    right:    0px;
    margin:   auto;
    ...
}

Ответ 3

Используйте

$('#modalDialogContainer').scrollTop()

чтобы найти количество прокрутки пользователя.

Затем вы можете показать свое сообщение с помощью

 { top: $('#modalDialogContainer').scrollTop()+'px' }

И он всегда будет виден для них и появится в верхней части того, что они смотрят:)

Ответ 4

есть полезный плагин, который может определить, присутствует ли элемент на экране или нет (прокручивается), вы можете просто использовать его, функция возвращает true для видимых областей на экране:

Вот быстрая демонстрация:

http://opensource.teamdf.com/visible/examples/demo-basic.html

Вот исходная страница:

http://www.teamdf.com/web/194/jquery-element-onscreen-visibility

так же просто, как:

$('#element').visible()

Ответ 5

Зачем вообще беспокоиться о высоте содержимого?

Я имею в виду, что это не простое решение проблемы, поставив "BlockUI" в диалоговом окне JQuery. Поскольку у вас есть фиксированная высота, ваш пользовательский интерфейс блока наверняка будет исправлен. Невозможно, чтобы свиток теперь мог влиять на ваше сообщение.

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

Например, вы можете поместить пользовательский интерфейс блока в следующий класс.

var container = ".ui-dialog";
$(container).block({
   message: '<h1>Processing</h1>' 
});
$.ajax({
    url: "/echo/json/",
    data: {
        json: {},
        delay: 5
    }
}).done(function() {
   console.log("Done with ajax");
    $(container).unblock();
});