javascript - ASP.NET - 如何动态调整 Javascript 模式窗口的大小

Question

我有一个 ASP.net 页面，其中有一个按钮可以创建模态窗口 onclick:

Dim sURL As String = System.Configuration.ConfigurationManager.AppSettings("APP_Path") & "Detail.aspx"
btnDone.Attributes.Add("onclick", "javascript:window.showModalDialog('" & sURL & "',null,'status:no;dialogWidth:auto;dialogHeight:auto;dialogHide:true;help:no;scroll:yes;center:yes');return false;")

我没有使用 jQuery。这将启动一个全新的 .aspx 页面，而不是当前页面中的新层。

模式窗口中的数据是绑定(bind)到数据表的数据网格。它可以包含 5 行到 50 行 - 直到运行时才知道数据表何时创建和绑定(bind)。

<asp:DataGrid ID="grdHeader" runat="server" Width="100%" CssClass="grdGrid"
Font-Size="12px" Allowpaging="false" GridLines="None" AutoGenerateColumns="true"
Font-Names="Verdana" CellPadding="0" ShowHeader="false"></asp:DataGrid>

隐藏代码:

Dim dvHeader as DataView
Dim dtHeader as DataTable

dvHeader = dtHeader.DefaultView
grdHeader.DataSource = dvHeader
grdHeader.DataBind()

我希望模式窗口的大小适合所显示的数据，而不需要滚动条。我确信我可以通过 Javascript 做到这一点，但 Javascript 确实不是我的强项。

任何帮助将不胜感激!

Answer 1

向弹出窗口的主体添加 onload 事件并让它调用以下函数:

function resizeWindow()
{
    var containerElement = document.getElementById('<%=grdHeader.ClientID%>');
    window.resizeTo(containerElement.offsetWidth, containerElement.offsetHeight);
}

不幸的是，offsetHeight 没有考虑浏览器中元素的高度(例如书签栏、网址栏等)，因此您确实需要添加一些具体的量以确保显示所有数据。我认为这可能是您可以做您希望做的事情的唯一方法，但缺少根据数据源中的行数估计窗口的高度(即 25 行 x 每行 25 像素 = 625 像素)

编辑:请注意，您使用 showModalDialog 本质上是打开一个新窗口。除非您使用 window.open(...) 打开窗口，否则上述函数将不起作用，无论如何，这将是最好的选择，因为您实际上并没有创建真正的模式对话框。