John John John John - 4 months ago 9
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 () {
$('#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

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

That might work