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

Question

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

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

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

Answer 1

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

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

Документ: http://jqueryui.com/demos/position/
Получите: http://jqueryui.com/download

Answer 2

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

$("#dialog").dialog();

должен центрироваться по умолчанию .

Я взглянул на статью, а также проверил, что она говорит на официальном сайте jquery-ui о размещении диалога : и в нем обсуждались 2 состояния: инициализация и после инициализации.

Примеры кода - (взято из jQuery UI 2009-12-03)

Инициализировать диалог с указанным параметром позиции.

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

Получить или установить опцию положения после инициализации.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Я думаю, что если бы вы удалили атрибут позиции, вы бы нашли его по центру, иначе попробуйте второй параметр сеттера, где вы определяете 3 элемента: "опция", "позиция" и "центр".

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 },

Удачи!