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

我有一个从jsp页面打开的modalDialog，它从db中获取数据并将其显示为（在modalDialog上）为简单表格。现在，从jsp调用模式弹出窗口时，我指定了它的宽度和高度，但我希望最终的弹出窗口应该具有足以容纳表格的高度（即，如果可以获取更多行，表格高度可能会有所不同）。我需要在modalDialog弹出窗口的完全加载时只调整一次大小。但我无法找出任何方法。我已经在$（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，但随后肯定有一些方法可以肯定:(

来源

2011-08-10 Prakhar

......你试图获取表的高度为$（'actionStatusPopupTable '）.outerHeight（）并设置你需要的任何高度？ – vector

是的，它没有工作。它对高度没有影响。我用它设置了弹出窗口的高度，但没有改变。 – Prakhar

你可以看看http://jqueryui.com/demos/dialog/。也许这可以帮助你 – 2011-12-09 10:12:35

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是否可以猜测尺寸，即使它没有显示？

来源

2011-08-11 16:19:26 cs94njw

我不知道这样的事情可能为你工作 - 是服务对我来说相当不错类似的东西...

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

来源

2011-12-09 10:01:29

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

回答

相关问题