Как я могу расположить диалог jQuery по центру? - PullRequest
Новая
       75

Как я могу расположить диалог jQuery по центру?

64 голосов
/ 03 декабря 2009

Я попробовал следующий код, но он только позиционирует диалоги в левом верхнем углу, чтобы центр, и это делает элемент для выравнивания вправо. Как я могу центрировать диалог по реальному центру, который считает ширину элементов, чтобы центральная линия сократила диалог до 50%, 50% половин? 

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

Ответы [ 21 ]

4 голосов
/ 21 февраля 2014

Jquery UI 1.9.2, jquery и более поздние версии не поддерживают IE8

Я нашел два решения для этого.

  1. Откат до jquery UI 1.7.2 для поддержки IE8,

  2. Попробуйте этот код с Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
3 голосов
/ 15 декабря 2014

Еще одна вещь, которая может вас порадовать позиционированием JQuery Dialog, особенно для документов, размер которых превышает порт просмотра браузера - вы должны добавить объявление 

<!DOCTYPE html>

В верхней части документа.

Без этого jquery стремится поместить диалоговое окно внизу страницы, и при попытке его перетаскивания могут возникнуть ошибки.

3 голосов
/ 20 декабря 2012

Согласно последующему обсуждению, проблема может быть связана с меньшей совместимостью IE в более новых версиях jQuery, и возврат к 1.7.2, похоже, решает проблему, которая возникает только в IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

2 голосов
/ 23 января 2012

Если вы используете отдельные файлы jquery или пользовательскую загрузку jquery, убедитесь, что на вашу страницу добавлен файл jquery.ui.position.js.

2 голосов
/ 14 ноября 2012

Вы сталкиваетесь с этим только в IE? Если это так, попробуйте добавить это в первую строку тега HEAD вашей страницы: 

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Хотя у меня были проблемы с совместимостью в более поздних версиях jQueries, но я столкнулся с этим сегодня.

2 голосов
/ 22 июля 2013

Для среды Win7 / IE9 просто установите в вашем файле CSS: 

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
2 голосов
/ 15 июня 2013

Вам также необходимо выполнить повторное центрирование вручную, если вы используете jquery ui на мобильных устройствах - диалог позиционируется вручную через свойство 'left & top' css. если пользователь меняет ориентацию, позиционирование больше не центрируется, и впоследствии его необходимо адаптировать / перецентрировать.

2 голосов
/ 14 июня 2013

Попробуйте это для более старых версий и тех, кто не хочет использовать позицию: 

$("#dialog-div-id").dialog({position: ['center', 'top'],....
1 голос
/ 14 апреля 2017

У меня была проблема с этим, и я наконец понял это. До сегодняшнего дня я использовал действительно старую версию 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 }
);
0 голосов
/ 31 мая 2014

Не удалось получить IE9 для центрирования диалога.

Исправлено, добавив это к CSS: 

.ui-dialog {
    left:1%;
    right:1%;
}

Процент не имеет значения. Любое небольшое число сработало.

Страница:
...