Прокручивание окна вверх, когда открывается диалоговое окно - PullRequest
Новая
       12

Прокручивание окна вверх, когда открывается диалоговое окно

20 голосов
/ 06 мая 2010

Я пытаюсь открыть модальное диалоговое окно jquery, используя jquery 1.4 и jquery-ui-1.8rc3.custom.js

Диалог открывается без проблем во всех браузерах, но в IE 7 и 6, после того, как диалог открывается, окно прокручивается до самого основания ... Я попытался прокрутить окно обратно в модальное положение, но очень противоречиво использовал следующую строку кода после открытия модального 

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

Одна странная вещь, которую я замечаю, это то, что после того, как я открываю модал, страница становится огромной ... как будто некоторые дополнительные вещи складываются внизу ... и в конечном итоге прокручиваются вниз. Любая идея, почему это могло произойти

в HTML 

<div id="selector">
</div>

в document.ready 

$('#selector').dialog({
  bgiframe: true,
  autoOpen: false,
  width: 100,
  height: 100,
  modal: true,
  position: 'top'
});

в js 

$('#selector').dialog('open');

Ответы [ 8 ]

38 голосов
/ 06 августа 2010

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

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

вы хотите добавить return false; к атрибуту onclick: 

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

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

6 голосов
/ 03 августа 2010

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

position:absolute;

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

.ui-widget { position: absolute; }
3 голосов
/ 24 февраля 2012

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

position: relative;

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

position: absolute;

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

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

position: absolute;

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

3 голосов
/ 06 мая 2010

Похоже, вам не хватает # в вашем селекторе: 

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

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

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

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

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

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

var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);
1 голос
/ 15 июня 2013

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

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});
1 голос
/ 21 марта 2013

У меня была похожая проблема, и вот как я решил. Это похоже на решение @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

});

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

1 голос
/ 08 марта 2013

Как я это исправил:

HTML 

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

Javascript 

function openDialogFunction(parameters) {

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

    //code to open the dialog

    $(window).scrollTop(topOff);
}
1 голос
/ 26 мая 2010

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

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

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

...