Question

我试图使用asp.net updatepanel创建一个弹出窗口。我希望弹出窗口的背景能够填满整个页面（100％宽度，100％高度），并且弹出窗口的宽度设置为1000px并位于顶部中心。

我尝试将面板包裹在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;
    }

Answer 1

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

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

Answer 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();

Updatepanel控制器显示问题

2 个答案: