John John John John - 2 months ago 4x
HTML Question

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

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 () {
keyboard: true
}, 'show');

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 ?



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

That might work