Как мне расположить диалог jQuery по центру?
-
12-09-2019 - |
Вопрос
Я пробовал следующий код, но он только позиционирует левый верхний угол диалогов по центру, и это заставляет элемент выравниваться по правому краю.Как я могу центрировать диалог по реальному центру, который считает ширину элементов, чтобы центральная линия сокращала диалог до 50% 50% пополам?
$('.selector').dialog({ position: 'center' });
Решение
Я почти уверен, что вам не нужно устанавливать позицию:
$("#dialog").dialog();
должен центрироваться по умолчанию.
Я просмотрел статью, а также проверил, что там написано. официальный сайт jquery-ui о позиционировании диалога :и в нем обсуждались 2 состояния:инициализировать и после инициализации.
Примеры кода — (взято из jQuery UI 03.12.2009)
Инициализируйте диалог с указанной опцией позиции.
$('.selector').dialog({ position: 'top' });
Получите или установите параметр позиции после инициализации.
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
Я думаю, что если бы вы удалили атрибут позиции, вы бы обнаружили, что он центрируется сам по себе, иначе попробуйте второй вариант установки, где вы определяете 3 элемента «опция», «позиция» и «центр».
Другие советы
Последний пользовательский интерфейс jQuery имеет компонент позиции:
$("#myDialog").position({
my: "center",
at: "center",
of: window
});
Док: 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 (бла), и для этого требуется указанный внутри или это не работает, т.е.
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.ui.position.js.
Вы сталкиваетесь с этим только в IE?Если да, попробуйте добавить это в ПЕРВУЮ строку тега HEAD вашей страницы:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Хотя я знал, что все проблемы совместимости были исправлены в более поздних версиях jQuery, но сегодня я столкнулся с этой проблемой.
Попробуйте это для более старых версий и для тех, кто не хочет использовать позицию:
$("#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%;
}
Процент не имеет значения.Любое небольшое количество работало.