Как расположить диалог jQuery в центре?
Я пробовал следующий код, но он только позиционирует диалоги в левом верхнем углу в центр, и это делает элемент выровненным вправо. Как я могу центрировать диалог в реальный центр, который подсчитывает ширину элементов, чтобы центральная линия сократила диалог до 50% 50% половинок?
$('.selector').dialog({ position: 'center' });
21 ответов
Я уверен, что вам не нужно устанавливать позицию:
$("#dialog").dialog();
Я посмотрел на статью, а также проверил, что она говорит на официальный сайт jQuery-ui о позиционировании диалога : и в нем обсуждались 2 состояния: инициализация и после инициализации.
примеры кода - (взято из jQuery UI 2009-12-03)
инициализировать диалог с указан параметр позиции.
$('.selector').dialog({ position: 'top' });
получить или установить параметр позиции после init.
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
Я думаю, что если бы вы удалили атрибут позиции, вы бы обнаружили, что он центрируется сам по себе, попробуйте второй вариант сеттера, где вы определяете 3 элемента "option" "position" и "center".
последний интерфейс 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 dialog version 1.10.1 и jquery 1.9.1 с ie8 в iframe(бла), и ему нужно в пределах указанного или он не работает, т. е.
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)
});
}
попробуйте это....
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
Я получаю лучшие результаты, чтобы поместить диалог jQuery в центр окна браузера с:
position: { my: "center bottom", at: "center center", of: window },
вероятно, есть более точный способ позиционировать его с опцией"используя", как описано в документации на http://api.jqueryui.com/position/ но я спешу...
Я должен вызвать функцию dialog()
дважды, чтобы расположить диалоговое окно (jQuery v1.11.2 / jQueryUI v1.10.4).
$("#myDialog").dialog({
/* initial dialog parameters */
}).dialog({
position: {
my: "center center",
at: "center center",
of: window
}
});
следующий параметр позиции работал для меня
position: { my: "right bottom", at: "center center", of: window },
удачи!
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") }
согласно следующему обсуждению, проблема может быть связана с меньшей совместимостью IE в новых версиях jQuery, возврат к 1.7.2, похоже, решает проблему, которая возникает только в IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8
еще одна вещь, которая может дать вам ад с позиционированием диалога jQuery, особенно для документов больше, чем порт просмотра браузера - вы должны добавить объявление
<!DOCTYPE html>
вверху документа.
без него jquery имеет тенденцию помещать диалог в нижней части страницы, и при попытке перетащить его могут возникнуть ошибки.
Если вы используете отдельные файлы jquery или пользовательскую загрузку jquery, в любом случае убедитесь, что у вас также есть jquery.пользовательский интерфейс.позиция.js добавлен на вашу страницу.
вы сталкиваетесь с этим только в IE? Если это так, попробуйте добавить это в первую строку тега HEAD вашей страницы:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Я думал, что все проблемы совместимости были исправлены в более поздних jQueries, но я столкнулся с этим сегодня.
попробуйте это для более старых версий и тех, кто не хочет использовать position:
$("#dialog-div-id").dialog({position: ['center', 'top'],....
вам также нужно выполнить ручную перецентровку при использовании jQuery ui на мобильных устройствах-диалоговое окно вручную позиционируется с помощью свойства css "left & top". если пользователь переключает ориентацию, позиционирование больше не центрируется и должно быть адаптировано / повторно центрировано после этого.
для среды Win7/IE9 просто установите в файле css:
.ui-dialog {
top: 100px;
left: 350px !important;
}
у меня была проблема с этим и я, наконец, понял это. До сегодняшнего дня я использовал очень старую версию 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 }
);
я исправил с помощью css:
.ui-dialog .ui-dialog-content {
width: 975px!important;
height: 685px!important;
position: fixed;
top: 5%;
left: 50%;
margin:0 0 0 -488px;
}
не удалось получить IE9 для центра диалога.
исправлено, добавив это в css:
.ui-dialog {
left:1%;
right:1%;
}
процент не имеет значения. Любое небольшое число работало.