Question

我一直在靠墙试图想办法阻止我的模态弹出框中的标题行滚动，同时允许我的内容滚动。我的HTML很弱，但似乎必须有办法实现这一目标。

这是标题的基本外观。

 __________
|Header  |X| 
|________|_|
|Content   |
|          |
|          |
|          |
\__________/

目前，当内容溢出容器时，我会得到一个滚动条以滚动整个IE

 ____________
|Header  |X[^]
|________|_| |
|Content   | |
|          | |
|          | | 
|          |_|
\__________[v]

我希望滚动条出现在内容块的内部，而不是滚动标题。

 __________
|Header  |X| 
|________|_|
|Content [^]
|        | |
|        | |
|        | |
\________[v]

这是此模态控件的HTML。

<input id="dummy" type="button" style="display: none" runat="server" />

<asp:ModalPopupExtender CancelControlID="Close" runat="server" ID="mpeThePopup" TargetControlID="dummy"
    PopupControlID="pnlModalPopUpPanel" BackgroundCssClass="modalBackground" PopupDragHandleControlID="Title" />
<asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup" Width="1280px" Height="800px">
    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server">
        <ContentTemplate>
            <table id="ContentTableTag" runat="server" cellpadding="0" cellspacing="0" style="width: 100%;
                height: 100%;">
                <tr>
                    <td id="Title" runat="server" style="background-color: rgb(79,82,90); text-align: left;
                        height: 28px; width: 97%; color: White;" nowrap="nowrap">
                        <h4 style="margin: 0px 0px 0px 5px;">
                            <asp:Label ID="LblSectionTitle" runat="server" Text="Modal"></asp:Label>
                        </h4>
                    </td>
                    <td id="Close" runat="server" style="background-color: rgb(79,82,90); text-align: right;
                        height: 28px; width: 3%" nowrap="nowrap">
                        <asp:ImageButton ID="ibClose" runat="server" Style="margin-right: 5px;" ImageUrl="~/WLImages/MLS/button_close.png"
                            ToolTip="Close"/>
                    </td>
                </tr>
                <tr class="standardFont" >
                    <td id="MainContentHolder" colspan="2" align="left" style="top: 0px; vertical-align: top; width: 100%; height: 100%" />
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

Answer 1

这只是一个想法 - 尝试在主要内容区域中添加overflow:scroll，如下所示：

 <td id="MainContentHolder" colspan="2" align="left" 
        style="top: 0px; vertical-align: top; 
        width: 100%; height: 100%; overflow:scroll;"   
 />

ModalPopupExtender HTML滚动内容

1 个答案: