Я пробовал следующий код, но он только позиционирует диалоги левой верхней угловой позиции в центр, и это делает элемент выравниваться вправо. Как я могу центрировать диалог с реальным центром, который подсчитывает ширину элементов, так что центральная линия сократит диалог до 50% 50% половин?
$('.selector').dialog({ position: 'center' });
Я уверен, что вам не нужно устанавливать позицию:
$("#dialog").dialog();
должен по умолчанию центрировать.
Я просмотрел статью, а также проверил, что она говорит на официальном сайте jQuery-ui
Последний пользовательский интерфейс jQuery имеет компонент позиции:
$("#myDialog").position({
my: "center",
at: "center",
of: window
});
Doc: http://jqueryui.com/demos/position/
Получить: http://jqueryui.com/download
Поскольку для диалога требуется позиция, вам нужно включить позицию js
<script src="jquery.ui.position.js"></script>
Итак, если кто-то нажимает на эту страницу, как я, или когда я забуду за 15 минут, я использую jqueryui-диалог версии 1.10.1 и jquery 1.9.1 с ie8 в iframe (blah), и ему нужно в пределах указанного или не работает, т.е.
position: {
my: "center bottom",
at: "center top",
of: $("#submitbutton"),
within: $(".content")
}
Благодаря @vm370 для указания меня в правильном направлении.
open: function () {
var win = $(window);
$(this).parent().css({
position: 'absolute',
left: (win.width() - $(this).parent().outerWidth()) / 2,
top: (win.height() - $(this).parent().outerHeight()) / 2
});
}
Чтобы зафиксировать центральное положение, я использую:
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
Jquery UI 1.9.2, jquery и более поздние версии не поддерживают IE8
Я нашел для этого два решения.
Откат к jquery UI 1.7.2 для поддержки IE8,
Попробуйте этот код с Jquery UI 1.9.2
position: {my: "center", at: "center", of: $("body"),within: $("body") }
Попробуйте это....
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
Я получаю лучшие результаты, чтобы поместить диалог jQuery в центр окна браузера с помощью
position: { my: "center bottom", at: "center center", of: window },
Вероятно, более точный способ разместить его с опцией " с помощью", как описано в документации по адресу http://api.jqueryui.com/position/ но я спешу...
В соответствии со следующим обсуждением проблема может быть связана с меньшей совместимостью IE в новых версиях jQuery, возвращаясь к 1.7.2, похоже, разрешает проблему, которая возникает только в IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8
Еще одна вещь, которая может дать вам ад с позиционированием JQuery Dialog, особенно для документов, больших, чем порт просмотра браузера - вы должны добавить объявление
<!DOCTYPE html>
В верхней части документа.
Без него jquery имеет тенденцию помещать диалог в нижней части страницы, и при попытке его перетаскивания могут возникнуть ошибки.
Следующий параметр позиции работал у меня
position: { my: "right bottom", at: "center center", of: window },
Удачи!
Мне нужно дважды вызвать функцию dialog(), чтобы расположить диалог (jQuery v1.11.2/jQueryUI v1.10.4).
$("#myDialog").dialog({
/* initial dialog parameters */
}).dialog({
position: {
my: "center center",
at: "center center",
of: window
}
});
Если вы используете отдельные файлы jquery или пользовательскую загрузку jquery в любом случае, убедитесь, что на вашей странице также добавлен jquery.ui.position.js.
Вы работаете в этом только в IE? Если да, попробуйте добавить это в строку FIRST вашего тега HEAD страницы:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
У меня было, что все проблемы совместимости были исправлены в более поздних jQueries, но сегодня я столкнулся с этим.
Попробуйте это для более старых версий и для тех, кто не хочет использовать позицию:
$("#dialog-div-id").dialog({position: ['center', 'top'],....
Вам также необходимо выполнить ручную повторную центрировку, если использовать jquery ui на мобильных устройствах - диалог вручную позиционируется с помощью свойства "left and top" css. если пользователь переключает ориентацию, позиционирование больше не центрируется и затем должно быть адаптировано/повторно центрировано.
Для среды Win7/IE9, установленной только в файле css:
.ui-dialog {
top: 100px;
left: 350px !important;
}
Я исправлен с помощью css:
.ui-dialog .ui-dialog-content {
width: 975px!important;
height: 685px!important;
position: fixed;
top: 5%;
left: 50%;
margin:0 0 0 -488px;
}
У меня была проблема с этим, и я, наконец, понял это. До сегодняшнего дня я использовал действительно старую версию jQuery версии 1.8.2.
Всюду, где я использовал dialog, я инициализировал его с помощью следующей опции позиции:
$.dialog({
position: "center"
});
Однако я обнаружил, что удаление position: "center" или замена его правильным синтаксисом не помогло, например:
$.dialog({
position: {
my: "center",
at: "center",
of: window
}
});
Хотя приведенное выше верно, я также использовал option, чтобы установить позицию как центр, когда я загрузил страницу по-старому, например:
// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");
Это заставило все мои диалоговые окна встать в верхнюю левую часть порта представления.
Мне пришлось заменить все экземпляры этого следующим новым синтаксисом:
passwordDialogInstance.dialog(
"option",
"position",
{ my: "center", at: "center", of: window }
);
Невозможно заставить IE9 центрировать диалог.
Исправлено, добавив это в css:
.ui-dialog {
left:1%;
right:1%;
}
Процент не имеет значения. Любое небольшое число сработало.