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

61

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

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

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

  • 2
    У меня проблема, похожая на ту, что я предполагаю, что ОП сделал. Диалог позиционируется в верхнем левом углу независимо от того, что я делаю! Очень расстраивает.
  • 0
    Ваш совет использовать позицию (центр) attr / property решил мою похожую проблему на мобильных телефонах. Но я использую jquery-ui-1.9.2.custom.
Теги:
dialog
jquery-dialog

21 ответ

45
Лучший ответ

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

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

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

Я просмотрел статью, а также проверил, что она говорит на официальном сайте jQuery-ui

Поделиться
  • 3
    Ну, причина центрирования в том, что иногда вы динамически загружаете контент после того, как диалог уже загружен.
63

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

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

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

Поделиться
  • 11
    У меня были проблемы с этим, потому что это иногда изменяло бы положение содержимого диалогового окна, но не внешнего блока, поэтому вот что сработало для меня: $('#myDialog').dialog('widget').position({my:"center", at:"center", of:window)}
  • 1
    Это не работает для меня в Safari 6.2.3, так как я прокручиваю вниз и запускаю эту функцию, элемент будет расположен ниже области просмотра.
Показать ещё 4 комментария
18

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

<script src="/jquery.ui.position.js"></script>
Поделиться
  • 0
    Бинго - у нас есть победитель. Это была моя проблема. Спасибо!
  • 0
    отлично! Спасибо за это. Не могу понять, почему это не работает
10

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

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

Благодаря @vm370 для указания меня в правильном направлении.

Поделиться
  • 1
    Мне не нужно было использовать within но причина моего повышенного голоса состоит в том, что он использует атрибут позиции следующим образом: $('.selector').dialog({ position: my: "center bottom", at: "center top", of: $("#submitbutton") }); вместо добавления вызова в конце: $('.selector').position(...)
  • 0
    Это имеет смысл много. Спасибо.
8 
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
Поделиться
  • 1
    Мне понравилось это решение в сочетании с window.scrollTo(0, 0); это прекрасно работает для меня +1
  • 0
    @MaVRoSCy, у меня похожая проблема. Если я прокручиваю, а затем открываю диалоговое окно, оно не располагается по центру. Как вы использовали scrollTo и куда мне его добавить?
Показать ещё 12 комментариев
7

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

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
Поделиться
  • 0
    Я думаю, что вам нужно $ (W). Плюс, это не похоже на прокрутку в браузере.
  • 0
    @ Chris Prince не обязательно, я думаю, что навигационный браузер достаточно умен, чтобы знать, что мы ссылаемся на окно в этом случае, я могу ошибаться, но на самом деле, если это будет скорее w = $ (window); быстрое решение этой проблемы. Этот подход интересен тем, что каждый раз, когда он открывает диалоговое окно, он ищет окно, которое служит вызовом функции изменения размера окна, поэтому я и добавляю его, хотя я должен добавить это обычно, когда использую Открытая функция в диалоге. Я также использую this.dialog ('destroy') при закрытии, чтобы обеспечить возможность многократного использования, особенно с JQuery UI Theming.
4

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

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

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

Поделиться
  • 0
    Это должно быть в топе! Спасибо
4

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

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
Поделиться
  • 0
    Это правильный ответ
4

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") }
Поделиться
  • 0
    Прекрасно работает в IE11 с jQueryUI 1.11.4
  • 0
    +1 из-за внутреннего параметра, который позволяет закреплять как на appendTo для этого элемента, а при использовании модального окна позволяет ограничить эту привязку.
3

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

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
Поделиться
  • 0
    Я тоже. Ваше предложение исправило меня. Вы нашли лучшее решение? Где-то вдоль линии я изменил версию jQuery, и эта проблема началась. Понижение не исправило это. Обновление: я поместил объект позиции в первую группу параметров, и он все еще работал
3

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

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

Удачи!

Поделиться
3

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

<!DOCTYPE html>

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

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

Поделиться
3

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

Поделиться
2

Для среды Win7/IE9, установленной только в файле css:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
Поделиться
2

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

Поделиться
  • 0
    Гэкидо: Вы предлагаете использовать этот метод?
  • 0
    это было некоторое время назад, когда я боролся с этим, но у нас был ряд проблем с jquery диалогами на мобильном телефоне. в основном они работали отлично - пока пользователь не переключил ориентацию устройства. Я не могу вспомнить конкретное исправление, которое было применено, но в основном мы проверили, изменилась ли ориентация, а затем изменили положение диалогового окна. Определенно чувствовал себя немного хакером, но это сработало.
2

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

$("#dialog-div-id").dialog({position: ['center', 'top'],....
Поделиться
2

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

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

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

Поделиться
2

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

Поделиться
0

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

Я исправлен с помощью css:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
Поделиться
-2

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

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню