Центрирование диалогового окна jQuery UI неизвестной высоты - возможно ли это? - PullRequest
Новая
       33

Центрирование диалогового окна jQuery UI неизвестной высоты - возможно ли это?

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

Есть ли способ сделать диалоговое окно jQuery, открывающееся в центре видимого окна, если оно неизвестной высоты?

У меня есть диалог, который открывает динамически загруженную форму неизвестной высоты.Когда он открывается в первый раз, он слегка смещается к нижней части экрана.Когда я закрываю и открываю снова, кажется, что верхнее смещение рассчитывается правильно.

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

edit: вот пример кода

У меня есть две страницы - одна - это диалоговое окно, которое создает экземпляр диалога, а другая - содержимое диалога.При нажатии на ссылку ее ссылка используется в качестве целевой страницы для диалога. 

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400
        });
        $("#dialog").dialog('open');
    });
});

Ответы [ 3 ]

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

Вам нужно указать height: 'auto', чтобы настроить диалог на основе его содержимого. 

.dialog({
    height: 'auto',
});

@ jon3laze Значением по умолчанию для «position» является «center», поэтому нет необходимости устанавливать его в открытой функции обратного вызова.

@ eagerMoose Нет необходимости вызывать 

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

потому что у диалогов есть опция autoOpen, которая по умолчанию имеет значение true, и диалог открывается сразу после создания экземпляра. Второй вызов .dialog ('open') игнорируется.

РЕДАКТИРОВАТЬ: поскольку загрузка асинхронная, диалог, вероятно, инициализируется до загрузки содержимого. Попробуйте инициализировать диалог в завершении загрузки. 

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'), function(){
            $(this).dialog({
                modal: true,
                width: 400
            });
        });
    });
});
0 голосов
/ 30 марта 2011

Виновной была функция .load (). Это ajax-вызов, означающий, что функция .dialog () вызывается до фактической загрузки содержимого, поэтому высота содержимого была практически догадкой.

Мне удалось решить проблему, определив диалог и его действия внутри функции .load (), как это 

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'), function(){
            $(this).dialog({
                modal: true,
                width: 400
             });
        });
    });
 });
0 голосов
/ 30 марта 2011

Вы можете получить высоту перед установкой диалога, используя свойство height

$ (окно) .height ();// возвращает высоту окна просмотра браузера

$ (document) .height ();// возвращает высоту документа HTML 

$(document).ready(function(){

    var h = $(document).height();

    $(a).click(function(){
        $("#dialog").load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400,
            height: h
        }).dialog('open');
    });
});

Кроме того, вы можете связать .dialog('open') до конца вызова.

Пример здесь http://jsfiddle.net/BZpPH/1/

ОБНОВЛЕНИЕ

Проблема звучит как позиция содержимого.Вы можете использовать опцию события open, чтобы сбросить размер при открытии.Я не могу заставить это работать на jsfiddle, потому что я не могу понять, как заставить метод .load() работать.Однако я попробовал это на моем собственном сервере, по умолчанию установил позицию сверху, и это открыло бы центр экрана. 

$(a).click(function() {
    $('#dialog').load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400,
            height: 'auto',
            open: function() {
                $(this).dialog('option', 'position', 'center');
            }
        });
    });
});
...