it-swarm.com.ru

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

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

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

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

63
newbie

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

$("#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');

Я думаю, что если бы вы удалили атрибут position, вы бы нашли его по центру, иначе попробуйте второй параметр setter, где вы определяете 3 элемента: «option», «position» и «center».

47
Luke Duddridge

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

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

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

65
WhyNotHugo

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

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

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

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

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

11
Mike
open: function () {

    var win = $(window);

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

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

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
Eduardo Cuomo

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

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

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

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

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

6
derekg

Мне нужно вызвать функцию 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
okki

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

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

Удачи!

4
Rakesh Prajapati

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
r-arun-r

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

<!DOCTYPE html>

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

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

3
thedrs

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

3
vm370

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

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

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

2
Ioannis Suarez

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

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

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

2
John

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

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

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

2
gekido

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

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

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