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

Answer 1

我剛發現這個。

ModalPopupExtender does not show scroll bar

它仍然沒有工作，但它是因爲我使用了一個母版，所以我解決了這個使用ClientID。

（注：居中內心的asp:panel垂直，我發現的唯一的事情就是把它放到使用style="vertical-align:middle"表格單元格 我還需要使用JavaScript設置，因爲height="100%"失敗，一些瀏覽器OptionSelectionTable的高度。）

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

我也不得不加入HorizontalAlign="Center"和ScrollBars="Auto"並向Panel ID="OptionSelectionPanel"（該modalpopup的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> 

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