Окно прокрутки вверх, когда диалог JQuery открывает

Question

Я пытаюсь открыть диалог модальный Jquery с помощью JQuery 1.4 и JQuery-UI-1.8rc3.custom.js

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

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

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

в 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'); 

Answer 1

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

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

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

---

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

позиция Тип: Строка, Массив по умолчанию: 'центр'

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

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

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

Answer 2

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

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

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

Answer 3

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

position:absolute; 

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

.ui-widget { position: absolute; } 

Answer 4

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

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

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

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

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

Answer 5

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

position: relative; 

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

position: absolute; 

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

В принципе, сделать определенные .ui-диалог имеет класс:

position: absolute; 

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

Answer 6

Как я установил его:

HTML

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

Javascript

function openDialogFunction(parameters) { 

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

    //code to open the dialog 

    $(window).scrollTop(topOff); 
} 

Answer 7

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

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

В 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 

}); 

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

Answer 8

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

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