Question

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

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

请有人帮助我解决可能的问题。

非常感谢

Answer 1

尝试使用this链接设置高度百分比。

$(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的高度并计算任何所需的百分比。

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

3 个答案: