jquery - 以百分比定义 maxHeight 的 jquery 对话框

Question

我创建了一个小项目，我必须在其中显示一个使用 jquery-ui 对话框的模式对话框。

我想以百分比定义对话框的最大高度。我已经尝试了几件事，但没有一个有效。

请有人可以帮助我可能是什么问题。

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

非常感谢

Answer 1

试试这个链接以百分比设置高度。

$(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 只允许您以像素表示最大高度。您需要在代码中按百分比执行计算。

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

您可以通过检查窗口高度或某些 div 的高度来做到这一点。

这是一个例子：http: //jsbin.com/otiley/4/edit

或者 ：

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

您可以获取任何 div 的高度并计算任何所需的百分比。