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

发布于 2024-11-28 18:17:03 字数 1905 浏览 4 评论 0原文

我有一个从 jsp 页面打开的 modalDialog，它从数据库获取数据并将其（在 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，但肯定有某种方法:(

原文

I have a modalDialog opening from a jsp page which fetches data from db and shows it (on the modalDialog) as a simple table. Now, on calling the modal popup from the jsp, I am specifying its width and height, but I want that the end popup should have a height just sufficient to hold the table (i.e. the table height may differ if more rows may get fetched). I need to do this resizing only once on the comlplete load of the modalDialog popup. But I am not able to figure out any way. I have tried different options in $(document).ready handler, but of no avail.

Here's how I am calling the modalDialog in the parent jsp:

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

Now i need to resize this popup on its load according to the height of the table which it contains:

Script:

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

And the body of the popup is something like this:

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

I tried using this also on window.load, document.ready etc, but can't figure out any solution:

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

I guess these things don't work coz it's a modalDialog, but then there must be some way for sure :(

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

横笛休吹塞上声 2024-12-05 18:17:03

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

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');
}

This is some JQuery code I use for centering soft-dialogs in a webpage. Could you use this kind of code to calculate dimensions and then feed into window.open?

Hmm... perhaps load the object into a hidden DIV, and see if JQuery can guess the dimensions even if it's not shown?

回复收藏 0 原文

心安伴我暖 2024-12-05 18:17:03

我想知道这样的东西是否适合你 - 类似的东西对我来说非常有用......

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

I wonder if something like this might work for you - something similar is serving for me quite well...

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

回复收藏 0 原文

~没有更多了~