动态更改 jquery UI 对话框的大小答案

【问题标题】：Changing the size of a jquery UI dialog dynamically动态更改 jquery UI 对话框的大小
【发布时间】：2013-07-29 09:59:05
【问题描述】：

我有一个 jquery 对话框。我在对话框中显示一个 asp.net gridview。我希望对话框的大小根据网格视图的大小而改变。

有一个按钮，点击时会显示对话框。

我想设置对话框的大小，使 gridview 完全适合它。

   I have my javascript code below : 



 $("#ViewModalPopup").dialog({
                height: 800px,
                scrollable: true,
                width: 800,
                modal: true

            });

这里的#ViewModalPopup 是包含模态弹出框的div。

我尝试实现以下逻辑来根据 div 的大小调整对话框的高度：

var maxHeight = 600;
            var currentHeight = $('#ViewModalPopup').height();

if (currentHeight < maxHeight) {
                var desiredHeight = currentHeight
                }
            else
            {
                var desiredHeight = maxHeight;
                }

  $("#ViewModalPopup").dialog({
                    height: desiredheight,
                    scrollable: true,
                    width: 800,
                    modal: true

                });

但它不工作

var currentHeight = $('#ViewModalPopup').height();

从第二个按钮开始点击后显示为空。

有什么方法可以动态改变对话框的大小？

【问题讨论】：

完全不设置高度会怎样？
嗨杰森 P ！有时，gridview 有太多的行，以至于它从屏幕的顶部延伸到底部。设置高度并放置滚动条有助于限制对话框的高度。
所以你基本上想要一个最大高度。您是否尝试过使用 css 在对话框 div 上设置 max-height？

标签： javascript jquery asp.net jquery-ui

【解决方案1】：

设置喜欢

 $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);

API

【讨论】：

嘿，谢谢！ $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);实际上是我正在寻找的。感谢您为我指明正确的方向。
maxheight 而不是 height ?

【解决方案2】：

/* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
    this.$element = $(element);
    this.$content = this.$element.find('.modal-content');
    var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
    var dialogMargin = $(window).width() < 768 ? 20 : 60;
    var contentHeight = $(window).height() - (dialogMargin + borderWidth);
    var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
    var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
    var maxHeight = contentHeight - (headerHeight + footerHeight);

    this.$content.css({
        'overflow': 'hidden'
    });

    this.$element.find('.modal-body').css({
        'max-height': maxHeight,
        'overflow-y': 'auto'
    });
}
$('.modal').on('show.bs.modal', function () {
    $(this).show();
    setModalMaxHeight(this);
});
$(window).resize(function () {
    if ($('.modal.in').length != 0) {
        setModalMaxHeight($('.modal.in'));
    }
});

【讨论】：

添加一些描述