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

Question

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

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

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

Answer 1

Я почти уверен, что вам не нужно устанавливать позицию:

$("#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 элемента «опция», «позиция» и «центр».

Answer 2

Последний пользовательский интерфейс jQuery имеет компонент позиции:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Док: http://jqueryui.com/demos/position/
Получать: http://jqueryui.com/download

Answer 3

Поскольку диалогу нужна позиция, Вам необходимо включить положение Js

<script src="jquery.ui.position.js"></script>

Answer 4

Итак, если кто-то попадет на эту страницу, как я, или когда я забуду через 15 минут, я использую диалоговую версию jqueryui версии 1.10.1 и jquery 1.9.1 с ie8 в iframe (бла), и для этого требуется указанный внутри или это не работает, т.е.

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Спасибо @vm370 за то, что указал мне правильное направление.

Answer 5

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

Answer 6

Чтобы исправить центральное положение, я использую:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 7

Попробуй это....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Answer 8

Я получаю наилучшие результаты, помещая диалоговое окно jQuery в центр окна браузера с помощью:

position: { my: "center bottom", at: "center center", of: window },

Вероятно, есть более точный способ позиционировать его с помощью опции "с использованием"как описано в документации по адресу http://api.jqueryui.com/position/ но я тороплюсь...

Answer 9

мне нужно вызвать функцию dialog() дважды, чтобы расположить диалог (jQuery v1.11.2/jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

Answer 10

Следующий параметр позиции работал у меня

position: { my: "right bottom", at: "center center", of: window },

Удачи!

Answer 11

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") }

Answer 12

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

Answer 13

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

<!DOCTYPE html>

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

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

Answer 14

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

Answer 15

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

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

Хотя я знал, что все проблемы совместимости были исправлены в более поздних версиях jQuery, но сегодня я столкнулся с этой проблемой.

Answer 16

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

$("#dialog-div-id").dialog({position: ['center', 'top'],....

Answer 17

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

Answer 18

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

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

Answer 19

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

Answer 20

Я исправил с помощью CSS:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

Answer 21

Не удалось заставить IE9 центрировать диалоговое окно.

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

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

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