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

【问题标题】：ASP.NET - How to Dynamically Size Javascript Modal WindowASP.NET - 如何动态调整 Javascript 模态窗口的大小
【发布时间】：2013-03-04 16:01:46
【问题描述】：

我有一个 ASP.net 页面，其中有一个按钮，可以在点击时创建一个模式窗口：

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 页面，而不是当前页面中的新层。

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

<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 真的不是我的强项。

任何帮助将不胜感激！

【问题讨论】：

showModalDialog()在哪里？

标签： javascript asp.net modal-dialog

【解决方案1】：

在弹出窗口的主体中添加一个 onload 事件并让它调用以下函数：

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

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

编辑： 请注意，您实际上是在使用 showModalDialog 打开一个新窗口。除非您使用 window.open(...) 打开窗口，否则上述功能将不起作用，这将是最好的选择，因为您实际上并没有制作真正的模态对话框。

【讨论】：