Question

我试图为所有模态对话框动态设置Bootstraps max-height元素的modal-body。我写了以下内容，这在打开对话框时似乎有效。我依赖enforceFocus方法存在，并在呈现对话框后调用。我意识到在设置CSS属性之前可能会有一段时间，对话框将无法完全正确地呈现，但我对此表示赞同。这个解决方案有什么问题吗？我知道我还没有考虑用模态打开来调整屏幕大小，但这似乎更容易解决。

(function ($) {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
    $.fn.modal.Constructor.DEFAULTS.keyword = false;

    var oldEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        oldEnforceFocus.call(this);
        var $element = this.$element;

        var maxHeight =
            $("body").height() // full page
          - $element.find(".modal-header").outerHeight(true) // modal header
          - $element.find(".modal-footer").outerHeight(true) // modal footer
          - ($element.find(".modal-dialog").outerHeight(true) - $element.find(".modal-dialog").height()) // dialog margins
          - 5; // fudge factor
        $element.find(".modal-body").css("max-height", maxHeight);
    }
})(jQuery);

谢谢！

编辑：在信用到期时给予信用，这是基于 Correct way to extend Bootstrap Modal - lock, unlock

Answer 1

如果您不想使用javascript，可以使用CSS媒体查询，并通过使用min-height获得所需的高度。例如，在min-height：540px上定义媒体查询，并将模态的max-height设置为max-height：500px。然后在min-height：680px处定义媒体查询，并将模态设置为max-height：640px。它并不流畅，它需要多个媒体查询才能达到您想要规划的最大尺寸，但它会让您到达那里。

Answer 2

@Josh解决方案适用于CSS和媒体查询，但写了很多媒体查询，其中小型设备具有不同的屏幕高度，例如Iphone和SamSung G和N系列，需要大量媒体查询甚至可以计算不同的模态高度屏幕尺寸。

因此根据媒体屏幕大小动态设置模态（模态体）的高度，并在小型设备上设置2种类型的媒体屏幕landscape和portrait，以下几行代码将让你非常接近你的目标

根据屏幕尺寸以秒为单位呈现模态HTML，如果屏幕尺寸发生变化，则根据屏幕尺寸调整高度

$(document).ready(function () {
    setInterval(Dimension, 100);

    function Dimension() {
        var doc = $(document).height(); // document height
        var head = $(".modal-header").height(); // modal header height
        var footer = $(".modal-footer").height(); // modal footer height
        var modheight = doc - head - footer - 65; // 65 is extra margins and it will not effect the height of modal any way if not changed.
        $('.modal-body').css('height', modheight);
    }
});

注意 Modal CSS中需要进行少量更改

CSS

.modal-dialog { margin: 0px auto !important; } .modal-body { overflow-y: scroll; // In-case the content in modal-body overflow so it will have scrolling. }

Fiddle

您可以通过增加和减少小提琴结果窗口的高度和宽度来检查模态高度调整本身。

动态设置Bootstrap模态体的最大高度

2 个答案: