Updatepanel 控制器显示问题答案

【问题标题】：Updatepanel controller display issuesUpdatepanel 控制器显示问题
【发布时间】：2014-05-14 21:05:42
【问题描述】：

我正在尝试使用 asp.net 更新面板创建一个弹出窗口。我希望弹出窗口的背景填充整个页面（100% 宽度，100% 高度）并将弹出窗口本身的宽度设置为 1000 像素并位于顶部中心。

我尝试将面板包装在一个 div 中并将宽度设置为 100%。然而，浏览器只是忽略它。如何使用 css 控制 asp.net 更新面板？以上能实现吗？

html:

<!-- Group Details Popup Starts  -->
<div id="divGroupDetails" runat="server">

        <asp:UpdatePanel ID="groupDetailsPopup" runat="server" RenderMode="Inline">
            <ContentTemplate>

                <div class="popup_wrapper">

                    <asp:LinkButton ID="lbcloseBTN" runat="server">Close</asp:LinkButton>
                    matt
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                </div>

            </ContentTemplate>

        </asp:UpdatePanel>

</div>

CSS：

    .popup_wrapper {
    width:100%;
    height:300px;
    background-color:red;
    }

【问题讨论】：

标签： css asp.net-ajax

【解决方案1】：

尝试将position: absolute; 添加到您的CSS。或者，在实践中，您可能会发现这更健壮：

.popup_wrapper {
    background-color:red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

【讨论】：

【解决方案2】：

使用 ajax 控件工具包的 modalpopup 扩展器并使用以下 css ：

    .ModalPopupBG
    {
        background-color: #666699;
        filter: alpha(opacity=50);
        opacity: 0.7;
    }

HTML 源代码：

    <td> 
    <asp:HiddenField ID="HiddenField1" runat="server" />
       <asp:ModalPopupExtender ID="MyPopup" runat="server" 
                DynamicServicePath="" Enabled="True" PopupControlID="Panel1" 
                TargetControlID="HiddenField1" BackgroundCssClass="ModalPopupBG"></asp:ModalPopupExtender>
    </td>

    <td>
    <asp:Panel ID="Panel1" runat="server">
                <table class="style1" bgcolor="#CC99FF">
                    <tr>
                        <td class="style13">
                            &nbsp;</td>
                        <td class="style17">
                            &nbsp;</td>
                        <td class="style7">
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td class="style18">
                            Enter Name</td>
                        <td align="left" class="style19">
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </td>
                        <td class="style20">
                            </td>
                    </tr>
                    <tr>
                        <td class="style10">
                        </td>
                        <td class="style16">
                        </td>
                        <td class="style12">
                        </td>
                    </tr>
                    <tr>
                        <td class="style13">
                            &nbsp;</td>
                        <td align="left" class="style17">
                            <asp:Button ID="Button2" runat="server" Text="Submit" onclick="Button2_Click" />
                            &nbsp;
                            <asp:Button ID="Button3" runat="server" Text="Button" />
                        </td>
                        <td class="style7">
                            &nbsp;</td>
                    </tr>
                </table>
            </asp:Panel>
   </td>

在代码中打开弹出窗口

      popup.show();

【讨论】：