Обновить позицию диалога jquery ui - PullRequest
Новая
       16

Обновить позицию диалога jquery ui

10 голосов
/ 28 марта 2011

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

$("#a_div").dialog({ width: 400 });

Диалог изначально отображается в центре страницы.но когда изменение высоты больше не является центром.

Как я могу обновить позицию диалога без закрытия и снова открыть ее?

спасибо

Ответы [ 3 ]

23 голосов
/ 30 марта 2011

Вам необходимо изменить положение, выполнив: 

$("#a_div").dialog({
    position: { 'my': 'center', 'at': 'center' }
});

Позиция устанавливается один раз при создании диалога, но впоследствии может быть изменена (или просто переустановлена ​​на то же значение, заставляя jQuery пересчитывать).

См. Эту демонстрацию: http://jsfiddle.net/petermorlion/3wNUq/2/

1 голос
/ 13 февраля 2014

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

function refreshDialogPosition(id) {
    $("#" + id).position({
                        my: "center",
                        at: "center",
                        of: window,
                        collision: "fit",
                        // Ensure the titlebar is always visible
                        using: function (pos) {
                            var topOffset = $(this).css(pos).offset().top;
                            if (topOffset < 0) {
                                $(this).css("top", pos.top - topOffset);
                            }
                        }
                    });
}

Использование: 

refreshDialogPosition("YourDialogId");

Это также гарантирует, что ваша строка заголовка всегда видна. В противном случае ваша строка заголовка будет за пределами вашего экрана при использовании диалогов с большим содержанием. (высота содержимого> высота окна)

Хорошего дня.

1 голос
/ 29 марта 2011

Вы можете попытаться изменить размер диалога, используя его классы непосредственно JQuery ( документация здесь )

Базовая структура JQueryUI Dialog такова: 

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

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

Другое решение - установить ширину диалога непосредственно перед открытием (когда ваши данные успешно загружены): 

$("#a_div").dialog({ width: 400 });

$.get('my_url.php',function(data){

   $('#a_div .ui-dialog').css('width','400px');

   // Or...

   $('#a_div').css('width','400px');
});

Надеюсь, это поможет вам.

...