Как вы автоматически изменяете размер всплывающего диалогового окна jQuery?
Я уже давно использую тот же метод и сценарий для всплывающих диалоговых окон jQuery, и это очень хорошо сработало для моих требований к контенту, который является достаточно статичным, т.е. высота никогда не была важна, потому что содержимое всегда было одинаковым.
Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я хотел бы использовать это для другого приложения, где содержимое теперь является динамическим, а высота изменяется.
Я прочитал документацию jQuery, прочитал некоторые другие сообщения о переполнении стека, но просто не могу понять это правильно. Таким образом, я хочу установить автоматическую высоту контейнера/всплывающего окна для удовлетворения содержимого.
Возможно, это не лучший сценарий, но вот он:
<script>
function GetPRComments(txt){
$.get("pur_req_comments.cfm?XReqNo = " + txt, function(data) {
$("#CommentsPopup").html(data);
$("#CommentsPopup").dialog({
height: 300,
width: 465,
title: "Purchase Requisition Details: " + txt,
modal: true,
dialogClass: "PRComments",
});
});
}
</script>
Ниже представлен вывод, основанный на приведенном выше скрипте. Одна из записей имеет краткое описание, а другая — более подробное. Чего я хотел бы добиться, так это устранить лишнее пространство и сделать содержимое подходящим.
Я (очень просто) надеялся, что Height: 'auto' поможет здесь, но, к сожалению, это не решает проблему. У меня есть ощущение, что это, возможно, нужно переписать, но не уверен. Я также пытался использовать maxWidth.
Я также прочитал ("изменить размер", "авто"), но не думаю, что это сработает для моего существующего сценария? Я просто не могу этого понять.
Любая помощь или указатели помогут. Джек
Здравствуйте, Lalalena, я постараюсь сделать что-нибудь, чтобы продемонстрировать это. Спасибо за ответ
Вы можете проверить высоту элемента, содержащего динамический элемент. Конечно, у вас может быть точка, где он длиннее окна просмотра. Как только вы узнаете, какой высоты вы хотите, вы можете установить ее до того, как она откроется.
Ответы 1
Рассмотрим этот подход, используя "auto":
function GetPRComments(txt){
$.get("pur_req_comments.cfm?XReqNo = " + txt, function(data) {
$("#CommentsPopup").html(data).dialog({
height: "auto",
width: 465,
title: "Purchase Requisition Details: " + txt,
modal: true,
dialogClass: "PRComments",
});
});
}
Если вы хотите установить height, вы можете рассчитать его.
function GetPRComments(txt){
$.get("pur_req_comments.cfm?XReqNo = " + txt, function(data) {
$("#CommentsPopup").html(data);
var h = $("#CommentsPopup").height();
if (h < 300){
h = 300;
}
$("#CommentsPopup").dialog({
height: h,
width: 465,
title: "Purchase Requisition Details: " + txt,
modal: true,
dialogClass: "PRComments",
});
});
}
Большое спасибо Twisty - к сожалению, не повезло с высотой: "авто", к сожалению. Также спасибо за подсказку о var h = $("#CommentsPopup").height(); - Я могу еще использовать это со временем, но пока я изменил свои столы и исправил высоту. Это дает мне немного больше белого пространства, но теперь, по крайней мере, все однородно. Отметил этот ответ - ура!
Согласно API, высота: "авто" должна работать. Можете ли вы опубликовать минимальный воспроизводимый пример?