根据当前屏幕窗口大小为我的模式窗口设置max-height

Question

I have the following script which will show a modal window for my partial view:-

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


    });

and I set the following css:-

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

but let say on a small size window the max-height of 400px will not be consistent if the actual screen size is less than this such as in a mobile screen. so my question is how I can set the max-height for the modal window to be 80% of the current screen size ?

Thanks

Answer 1

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

That might work

Answer 2

只需在样式表中使用％插入的px

Answer 3

For pure css solution.

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

here 100vh-> 100% of height. 200px is the approx combine space(height) used by modal header and footer.

css solution is better than js as on window size change, it will directly adjust the height of the modal.

Answer 4

Use this:

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

Maybe you also need:

html, body {
    height:100%;
}