根据当前屏幕 window 大小为我的模式 window 设置最大高度

Question

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

$(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;
}

但假设在小尺寸 window 上，如果实际屏幕尺寸小于此尺寸（例如在移动屏幕中），则 400px 的最大高度将不一致。所以我的问题是如何将模式 window 的最大高度设置为当前屏幕尺寸的 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-> 100% 的高度。 200px 是模式页眉和页脚使用的大约组合 space(高度)。

css解决方案比js好window尺寸变化，它会直接调整模态的高度。

根据当前屏幕 window 大小为我的模式 window 设置最大高度

set max-height for my modal window based on the current screen window size

html

javascript

css

jquery

razor