Jquery dialog specifying maxHeight as a percentage

Question

I created a small project in which I have to display a modal dialog for which I used the jquery-ui dialog.

I want to determine the maximum height for the dialog as a percentage. I tried a few things, but none of them work.

Please help me, what could be the problem.

See http://jsbin.com/otiley/1/edit

Many thanks

Answer 1

Try this link to set the percentage height.

$(document).ready(function() { $('#testColorBox').click(function() { var wWidth = $(window).width(); var dWidth = wWidth * 0.8; var wHeight = $(window).height(); var dHeight = wHeight * 0.8; var $link = $(this); var $dialog = $('<div></div>') .load('test.html') .dialog({ autoOpen: false, modal: true, title: $link.attr('title'), overlay: { opacity: 0.1, background: "black" }, width: dWidth, height: dHeight, draggable: false, resizable: false }); $dialog.dialog('open'); return false; }); }); 

Answer 2

jQuery UI allows you to express the maximum height in pixels. You will need to do a percentage calculation in your code.

 $(document).ready(function(){ $( "#dialog-modal" ).html($("#temp").html()); $("div#dialog-modal").dialog({ height: "auto", maxHeight: $("div#dialog-modal").outerHeight() * .2, resizable: false, width: "70%", modal: true, title: "Hello" }); }); 

Answer 3

You can do this by setting the height of the window or the height of some div.

Here is an example: http://jsbin.com/otiley/4/edit

Or:

  $(document).ready(function(){ var height = $(window).height(); height = height*0.20; $( "#dialog-modal" ).html($("#temp").html()); $("div#dialog-modal").dialog({ height: "auto", maxHeight: height, resizable: false, width: "70%", modal: true, title: "Hello" }); }); 

You can take the height of any div and calculate any desired percentage.