Окно прокрутки, когда открывается диалоговое окно jquery

Ответ 1

Похоже, что в селекторе отсутствует #:

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);

возможно, поэтому окно прокручивается в верхний левый угол.

Изменить: я просто смотрел документацию, а .dialog('option','position') значение по умолчанию - center.

position Тип: String, Array По умолчанию: 'center'

Определяет, где должно быть диалоговое окно отображается. Возможные значения: 1) a одиночная строка, представляющая позицию в области просмотра: "центр", "левый", 'right', 'top', 'bottom'. 2) массив содержащий координатную пару x, y в смещение пикселей слева, верхний угол viewport (например, [350, 100]) 3) массив содержащие значения строки x, y (например, ['right', 'top'] для верхнего правого угол).

Таким образом, вы можете получить текст или числа, возвращенные с использованием опции позиции, а window.scrollTo() - номера. Поэтому попробуйте это:

var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);

Ответ 2

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

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

вам нужно добавить атрибут return false; в атрибут onclick:

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

Это предотвращает перегрузку страницы для привязки #, которая заставляет ее прыгать вверх.

Ответ 3

Я тоже боролся с этой проблемой. Я не использовал темы, поэтому у меня не было этого важного свойства CSS:

position:absolute;

Я добавил это в свой CSS файл, и теперь все работает отлично:

.ui-widget { position: absolute; }

Ответ 4

У меня была эта проблема, потому что я назначал класс в диалоговом окне, которое устанавливалось в моей таблице стилей:

position: relative;

который переопределял:

position: absolute;

необходимый для диалога.

В принципе, убедитесь, что класс .ui-dialog имеет:

position: absolute;

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

Ответ 5

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

Чтобы отладить проблему, чтобы я не включил весь jQuery UI css, я сделал две идентичные страницы, один из которых использовал jQuery UI css, а другой - и не просто проверял, что было в CSS с помощью Firebug на Firefox и добавили эти стили в мой css.

Надеюсь, это поможет. Mag

Ответ 6

Как я его исправил:

HTML

<a href="javascript:openDialogFunction(parameters)">...</a>

Javascript

function openDialogFunction(parameters) {

    var topOff = $(window).scrollTop();

    //code to open the dialog

    $(window).scrollTop(topOff);
}

Ответ 7

У меня была аналогичная проблема, и я решил это. Это похоже на решение @bassim, но с небольшим разным вкусом.

У меня был тот же якорный тег и использовался "$ (# anchor-element).click(function() {..}). Ниже приведен фрагмент кода -

В jsp -

<a id="open-add-comments-${site}" class="open-add-comments" href="#"  site-id="${site}" project-id="${project}"  >Add comments</a><br/>

В javascript -

 $( ".open-add-comments" ).click(function(){

    var projectId=$(this).attr("project-id");

    $( "#add-comment-form" ).dialog({
        //width: "auto",
        width: 800,
        height: "auto",
        position: "absolute",
        maxWidth: 800,
        minWidth: 300,
        maxHeight: 400,
        modal: true,
        title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ",
        open: function(event, ui) { 

        $("#add-comment fieldset textarea").html("").focus();
            ............
            .....
        },
        buttons: {
            "Save": function() {

            .... some business logic

            },
            Cancel: function() {
                $( this ).dialog( "close" );

            }
        }   

    });

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE

});

Это сделал трюк и разрешил проблему. Благодарим вас за отдых на этой странице, который дал хорошие указания и помог решить проблему. Команда Kudos.

Ответ 8

Другим решением является вызов event.preventDefault, когда диалог открыт.

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});