Question

我有以下脚本，它将显示部分视图的模态窗口： -

$(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {        
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');

                bindForm(this);
            });
            return false;
        });


    });

我设置了以下css： -

#myModalContent {
   max-height: 400px;
   overflow-y: auto;
}

但是，在小尺寸窗口上，如果实际屏幕尺寸小于此值（例如在移动屏幕中），则400px的最大高度将不一致。所以我的问题是如何将模态窗口的最大高度设置为当前屏幕尺寸的80％？

由于

Answer 1

$("#myModalContent).css("max-height", screen.height * .80);

怎么样？

这可能有效

Answer 2

在样式表中使用％而不是px

Answer 3

对于纯css解决方案。

#modalname .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

这里100vh-＆gt; 100％的高度。 200px是模态页眉和页脚使用的近似组合空间（高度）。

css解决方案比js更好，因为窗口大小改变，它将直接调整模态的高度。

Answer 4

使用此：

#myModalContent {
    height:400px;
    max-height:80%;
    overflow-y:auto;
}

也许你还需要：

html, body {
    height:100%;
}

根据当前屏幕窗口大小设置模态窗口的最大高度

4 个答案: