根据动态内容大小调整模式对话框的大小

时间:2011-08-10 12:59:08

标签: jquery jsp resize popup modal-dialog

我从jsp页面打开了一个modalDialog,它从db中获取数据并将其显示(在modalDialog上)作为一个简单的表。现在,在从jsp调用模式弹出窗口时,我指定它的宽度和高度,但我希望结束弹出窗口的高度足以容纳表格(即,如果可以获取更多行,则表格高度可能不同) 。我需要在modalDialog弹出窗口的comlplete加载上只调整一次。但我无法弄明白。我在$(document).ready处理程序中尝试了不同的选项,但无济于事。

以下是我在父jsp中调用modalDialog的方法:

var varURL = "${pageContext.request.contextPath}/myController/actionStatus.htm?Transaction_id="+trans_id;
if (window.showModalDialog) {
    window.showModalDialog(varURL, "popupActionStatus", "dialogWidth:521px; dialogHeight:400px");
    closeAllPopups();
} else {
    window.open(varURL, 'popupActionStatus', 'height=400, width=600, toolbar=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, modal=yes');
    closeAllPopups();
    }

现在我需要根据它所包含的表的高度在其负载上调整此弹出窗口的大小:

脚本:

    $(document).ready(function() {  
        jQuery('.popupStatusDetails').show();
        $("#actionStatusPopupTable").tablesorter({
        cancelSelection : true
        });
    });

弹出窗口的主体是这样的:

<body>
    <div class="popupStatusDetails" style="top: 0%;left: 0%" id="div1">
        <table id="actionStatusPopupTable" width="100%" border="0" cellpadding="0" cellspacing="1" class="tableborder">
            <thead>
                <tr> Headers here </tr>
            </thead>
            <tbody>
                <tr> Data rows here </tr>
                <tr> Data rows here </tr>
                <tr> Data rows here </tr>
                ...........
            </tbody>
        </table>
   </div>
</body>

我也试过在window.load,document.ready等上使用它,但无法找出任何解决方案:

window.dialogHeight = document.getElementById("popupStatusDetails").style.height;

我猜这些东西不起作用因为它是一个modalDialog,但是必须有一些确定的方法:(

2 个答案:

答案 0 :(得分:0)

function showCenteredLayer(layerID) {
var object = $('#'+layerID);
object.css("position","absolute");
object.css("top", ( $(window).height() - object.height() ) / 2+$(window).scrollTop() + "px");
object.css("left", ( $(window).width() - object.width() ) / 2+$(window).scrollLeft() + "px");
MM_showHideLayers(layerID,'','show');
}

这是我用于在网页中居中软对话框的一些JQuery代码。您可以使用这种代码来计算尺寸,然后输入window.open?

嗯...也许将对象加载到隐藏的DIV中,看看JQuery是否可以猜测尺寸,即使它没有显示?

答案 1 :(得分:0)

我想知道这样的事情是否适合你 - 类似的事情对我来说非常好......

$(document).ready(function () {

  //Determine page size
  var $actionStatusPopupTable= $("#actionStatusPopupTable");
  var iWidth = $actionStatusPopupTable.width() + 20,
    iHeight = $actionStatusPopupTable.height() + 35;

  //Resize page to just larger than tblDetails
  if (document.all) {

    //IE
    window.dialogWidth = iWidth + "px";
    window.dialogHeight = iHeight + "px";
  } 
  else {

    //Non IE
    iHeight += 55; //Non IE quirk
    window.resizeTo(iWidth, iHeight);
  }
}