Окно, прокручивающее, когда диалоговое окно jQuery открывается
Я пытаюсь открыть модальное диалоговое окно 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]);
Одна странная вещь, которую я замечаю, состоит в том, что после того, как я открываю модальное, страница становится огромной..., как будто некоторые дополнительные вещи складывают в нижней части...., и она в конечном счете прокручивает к нижней части. Любая идея, почему это могло быть 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');
4 ответа
Похоже, вам не хватает # в вашем селекторе:
window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);
, возможно, поэтому окно прокручивается в левый верхний угол.
Изменить: я просто смотрел документацию и .dialog ('option', 'position') значение по умолчанию center .
position Тип: String, Array По умолчанию: 'center'
Определяет, где должно отображаться диалоговое окно . Возможные значения: 1) одиночная строка , представляющая позицию в области просмотра: 'center', 'left', 'right', 'top', 'bottom'. 2) массив , содержащий пару координат x, y в пиксельном смещении от левого верхнего угла области просмотра (например, [350,100]) 3) массив {{1} } содержащие строковые значения позиции x, y (например, ['right', 'top'] для верхнего правого угла).
Таким образом, вы можете получить текст или числа, возвращаемые с помощью параметра позиции, а window.scrollTo () требует чисел. Так что попробуйте вместо этого:
var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);
У меня была аналогичная ситуация, когда диалоговое окно открывалось там, где должно было быть на странице, но пользователь был перенаправлен в конец страницы. По сути, я забыл включить соответствующий CSS, соответствующий библиотеке JavaScript jQuery UI. Сделав это, все было в порядке. Я предполагаю, что это что-то вроде этого, где есть стили, установленные для элементов в jQuery css, которые не установлены в вашем собственном CSS.
Чтобы отладить проблему и не включать весь css пользовательского интерфейса jQuery, я сделал две идентичные страницы, одну с использованием css пользовательского интерфейса jQuery, а другую - нет, и просто проверил, что изменилось в css, через Firebug в Firefox и добавил эти стили в мой css.
Надеюсь, это поможет. Mag
Я тоже боролся с этой проблемой. Я не использовал никаких тем, поэтому у меня не было этого важного свойства CSS:
position:absolute;
Я добавил это в свой файл CSS, и теперь все работает нормально:
.ui-widget { position: absolute; }
Если вы используете тег привязки, как показано ниже, для запуска диалогового окна
<a href="#" onclick="$(#id).dialog('open');">open dialog</a>
, вам нужно добавить return false; в атрибут onclick :
<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>
Это предотвращает перезагрузку страницы для привязки # , которая заставляет ее перескакивать наверх.