с диалогом пользовательского интерфейса jquery, есть ли в любом случае максимальная высота и использовать «авто», если его меньше - PullRequest
Новая
       7

с диалогом пользовательского интерфейса jquery, есть ли в любом случае максимальная высота и использовать «авто», если его меньше

23 голосов
/ 14 апреля 2011

Я хочу, чтобы диалоговое окно имело настройку максимальной высоты, но, если содержимое меньше, затем уменьшить его, чтобы сделать то, что делает height = 'auto'.Это возможно в диалоговом окне JQuery UI?

Ответы [ 8 ]

36 голосов
/ 29 ноября 2012

Этого можно добиться, выполнив следующие действия:

HTML 

<div id="dialog" title="Dialog Title">
    Dialog content
</div>

JavaScript 

$('#dialog').dialog({
    resizable: false,
    minHeight: 0,
    create: function() {
        $(this).css("maxHeight", 400);        
    }
});

Проверьте контрольный пример на jsFiddle .

15 голосов
/ 16 сентября 2013

Я использую это: 

$('#dialog').dialog({
    maxHeight: $(window).height(),
    open: function() {
        $(this).dialog('option', 'maxHeight', $(window).height());
   }
});

Сброс maxHeight в "open" полезен, когда окно изменило размер.

3 голосов
/ 14 апреля 2011

Вы можете сделать это так: 

 $('#testing').resizable("enable");
 $('#testing').dialog({ maxHeight: 400 });


<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
2 голосов
/ 26 ноября 2012

После диалога .open() и заполнения .html(): 

$("#div").css('max-height','500px');
1 голос
/ 28 ноября 2012

Я думаю, что вы могли бы работать вместе с height и maxHeight и подгонять высоту диалога, когда ваша высота содержимого div <высота диалога. Делайте это, когда диалог <code>open. Как это: 

<div id="dialog">
  <div id="contents">
    <input type="text" style="height:3000px"
  </div>  
</div>


    $('#dialog').dialog({
      autoOpen: false,
      maxHeight:400,
      height:400,
      buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open:function(){
       var s = $('#contents').height();
       var s2 = $(this).dialog( "option", "maxHeight" );
       if(s < s2){
         $(this).height(s);
       }
    }
});

попробуйте изменить значение style="height:3000px: http://jsbin.com/iwecuf/2/edit

1 голос
/ 11 мая 2011

Ошибка # 4820 в jQuery UI Dialog применима, и вас могут заинтересовать обходные пути.

0 голосов
/ 24 января 2019

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

<div id="dialog">
  <div style="max-height: 400px;">
      POPUP CONTENTS GO HERE
  </div>
</div>
0 голосов
/ 30 ноября 2012

Позвольте мне добавить 2 цента.

Создайте стиль CSS примерно так 

.d-maxheight {  max-height:200px; }

Теперь просто скажите диалогу применить этот класс к диалогу 

$(document).ready(function(){
  $(d).dialog({
    dialogClass: 'd-maxheight',
    height:400
  });
});

Вот пример в jsbin

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

...