ASP.NET ModalPopupExtender：当溢出时需要显示滚动条

Question

我在ModalPopupExtender中显示了一个GridView。当屏幕分辨率太小时，弹出窗口太大无法完全显示在页面上。

我只想在这种情况下为弹出窗口添加滚动条。

我知道这可能是一些CSS的问题，但我尝试过的所有方法都没有成功。

以下是一些基本的CSS：

.modalTextBoxBackground
{
   background-color:Gray;
   filter:alpha(opacity=70);
   opacity:0.7;
}  
.modalTextBox
{
    border: 1px solid #FFFFFF;
    background-color: #0066CC;
    color: #00FFFF;

}

这里是来自aspx的代码

<asp:Panel ID="OptionSelectionPanel" runat="server" CssClass="modalTextBox">
            <asp:UpdatePanel ID="OptionSelectionUpdatePanel" runat="server" UpdateMode="Conditional" >
            <Triggers>
                <asp:asyncPostBackTrigger ControlID="TemplateSelection" />
            </Triggers>
            <ContentTemplate>

            <table class="EditRow">
            <tr class="HeaderFooter">
            <td colspan="3" class="modalTextBoxTitle">
                Add options to Quote
            </td>
            </tr>
            <tr>
            <td>
                Manufacturer
            </td>
             <td>
                <asp:DropDownList ID="OptionManufacturerFilter" runat="server" 
                    DataSourceID="OptionManufacturerDataSource" DataTextField="Name" 
                    DataValueField="Code" AutoPostBack="True" >
                </asp:DropDownList>
            </td>
            </tr>

                            <tr>
            <td colspan="3">
                <asp:GridView ID="NewOptionSelection" 
                              runat="server" 
                              DataSourceID="AvailableOptions" 
                              DataKeyNames="Option_Id"
                              AllowPaging="True" 
                              AllowSorting="True" 
                              AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="category_Descr" HeaderText="Category" SortExpression="category_Descr,subcategory_Descr,code" />
                    <asp:BoundField DataField="subcategory_Descr" HeaderText="Sub-Category" SortExpression="subcategory_Descr,code" />
                    <asp:BoundField DataField="Manuf_Name" HeaderText="Manufacturer" SortExpression="Manuf_Name"/>
                </Columns></asp:GridView>
            </td>
            </tr>
            <tr class="HeaderFooter">
            <td colspan="3" class="Center">
                <asp:Button ID="OptionSelectionClose" runat="server" Text="Close" />

            </td>
            </tr>
            </table>
             </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
       <asp:Button runat="server" ID="HiddenTargetControlForOptionSelectionModalPopup" style="display:none"/>    
        <cc1:ModalPopupExtender ID="OptionSelectionModalPopupExtender" runat="server" 
                                TargetControlID="HiddenTargetControlForOptionSelectionModalPopup"
                                PopupControlID="OptionSelectionPanel" 
                                BackgroundCssClass="modalTextBoxBackground" />

- DavRob60

---

你能发布相关的CSS和HTML吗？ - Keith Rousseau

我刚刚将代码添加到问题中。 - DavRob60

我最后做的事情是在 <table class="EditRow"> 上添加了 "<asp:Panel ID="ScrollBarsPanel" runat="server" ScrollBars="Auto" Height="500px">，这解决了弹出框的高度问题，但我无法将其设置为类似于 90% 的值。我还尝试过像下面这样的东西： <asp:Panel ID="ScrollBarsPanel" runat="server" ScrollBars="Auto" style="max-height:90%;"> 或者其他 CSS 变体，但都没有帮助。 - DavRob60

Answer 1

我刚刚找到了这个。

ModalPopupExtender不显示滚动条

虽然它仍然没有起作用，但是因为我使用了一个母版页，所以我使用了ClientID来解决这个问题。

(注意：要垂直居中那个内部的asp:panel，我唯一找到的方法是将其放入一个带有style="vertical-align:middle"的表格单元格中。 我还需要使用JavaScript设置OptionSelectionTable的高度，因为在某些浏览器中height="100%"会失败。)

<script type="text/javascript">
  function pageLoad() {
      $get('<%= OptionSelectionPanel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
      $get('<%= OptionSelectionTable.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
  }
    </script> 

我还需要在Panel ID="OptionSelectionPanel"中添加HorizontalAlign="Center"和ScrollBars="Auto"，以及在PopupControlID为模态弹出窗口时，进行相应的修改。

我将CssClass="modalTextBox"移到内部的asp:panel上，并恢复了HorizontalAlign="Left"的设置。

 <asp:Panel ID="OptionSelectionPanel" runat="server" 
            HorizontalAlign="Center" ScrollBars="auto">
            <asp:UpdatePanel ID="OptionSelectionUpdatePanel" 
                             runat="server" 
                             UpdateMode="Conditional" >
            <Triggers>
                <asp:asyncPostBackTrigger ControlID="TemplateSelection" />
            </Triggers>
            <ContentTemplate>
                <table ID="OptionSelectionTable" 
                       runat="server" 
                       border="0" 
                       cellpadding="0" 
                       cellspacing="0">
                        <tr>
                        <td style="vertical-align:middle">    
                                <asp:Panel ID="OptionSelectionInnerPanel" 
                                           runat="server" 
                                           HorizontalAlign="Left" 
                                           CssClass="modalTextBox">
                                  <table class="EditRow">


                                              ......


                                  </table>
                               </asp:Panel>
                  </td></tr></table> 
             </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>

- DavRob60

Answer 2

尝试将整个外部表格元素包装在一个 div 中，并将该 div 的高度设置为对话框的高度，然后将新 div 的 CSS overflow-y 属性设置为滚动。

[编辑 - jQuery 解决方案]

查看 jQuery 高度 http://api.jquery.com/height/。基本上，您会选择父元素并在运行时更新其 CSS 属性，类似于下面的代码（未经测试）。请记住，这不是理想的解决方案，并且在不同浏览器之间计算肯定会有所不同。

$(document).ready(function() {
   var parentDiv =  $("#yourParentDiv");
   parentDiv.css("height", parentDiv.height());
   parentDiv.css("overflow-y", "scroll");
});

- James

---

将div的高度设置为对话框的高度。 问题在于，我不想要固定的高度，只想在显示滚动条之前设置最大高度。 - DavRob60

你可以使用jQuery或其他工具在客户端运行时计算元素的高度，并相应地设置CSS。但除此之外，我很确定你试图使用基于百分比的高度来实现的目标目前在HTML/CSS中是不可能的。 - James

如果这是必须的，您可以考虑使用Silverlight或Flash构建一些东西。 - James

好的，也许可以用jQuery或者JavaScript来实现。不考虑Silverlight或Flash。需要更多关于这个问题的信息... - DavRob60

@DavRob60 - 请查看我在帖子上的最新编辑并尝试一下。 - James

@James - 我没有选择你的方式，因为我对Jquery不太熟悉（从未使用过）。无论如何，还是谢谢。 - DavRob60