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

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

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

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

62
dialog jquery jquery-dialog jquery-ui

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".

47

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

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

Doc:http://jqueryui.com/demos/position/
Получить:http://jqueryui.com/download

65

поскольку диалогу нужна позиция, вам нужно включить позицию js

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

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

11
open: function () {

    var win = $(window);

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

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

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

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

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

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

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

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

5

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

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

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

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

удачи!

4

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

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

3

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

<!DOCTYPE html>

вверху документа.

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

3

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

2

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

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

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

2

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

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

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

2

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

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

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

я исправил с помощью css:

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

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

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

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

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

-1