Поддержите диалоговый центр с динамическим контентом
У меня было бы диалоговое окно со следующим
$("#statusbox").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
width: 'auto',
height:'auto',
title:"Check Order Status",
buttons: {
Find: function() {
get_status();
},
Close: function() {
$(this).dialog('close');
}
}
});
И когда пользователь нажимает кнопку находки, она выполняет Ajax и возвращает заказы диалоговому окну, и она динамично изменена, но она только расширяет поле вниз. Там путь состоит в том, чтобы заставить поле расшириться вверх и вниз так, чтобы диалоговое окно осталось в центре?
Также, если бы было достаточно содержания затем, то оно могло бы потенциально пойти вне границ страницы, таким образом, я думал бы, что мог использовать максимальную высоту для предотвращения этого, но что я делаю, если они изменяют размер окна?
Я пытался добавить maxHeight: 500, и это не мешало ему расшириться от нижней части.
2 ответа
Хорошо, у меня все работает, ну не на 100%, но довольно близко.
Я установил позицию 'top', так как auto всегда расширяется вниз. Затем я добавил функцию open, как было предложено в тикете в качестве обходного пути, чтобы заставить autoHeight соблюдать maxHeight.
Учитывая это, я действительно хотел использовать высоту тела, а не документа, и я не уверен, почему я должен был вычесть 200 из этого?
$("#statusbox").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
width: 'auto',
height:'auto',
position: 'top',
title:"Check Order Status",
open: function(event, ui) {
$(this).css({'max-height': $(document).height()-200, 'overflow-y': 'auto'});
},
buttons: {
Find: function() {
get_status();
},
Close: function() {
$(this).dialog('close');
}
}
});
У вас есть код, который помещает диалог в середину экрана, я полагаю? Запустите это после того, как он будет повторно заполнен новой информацией.
Напишите новый код, который гарантирует, что коробка не выше окна. Если это так, установите высоту диалогового окна равной высоте окна (или меньше, если вы хотите заполнить поля), и установите переполнение на прокрутку . Запустите этот код всякий раз, когда они изменяют размер окна.