弹出窗口的 10% 保证金

Question

我怎样才能让这个模态弹出窗口在 x 和 y 方向上填充 80% 的屏幕。即每边10%的边距

标记

<!-- Add Files Modal Form -->
            <asp:HiddenField ID="AddFilesForModal" runat="server" />
            <ajaxToolkit:ModalPopupExtender runat="server" ID="AddFilesModal" BehaviorID="modalPopupExtenderAddFiles"
                TargetControlID="dummyButtonAddToPendingList" PopupDragHandleControlID="PanelAddFilesOuter" PopupControlID="PanelAddFilesOuter"
                OkControlID="dummyButtonAddToPendingList" BackgroundCssClass="ModalTreeviewBackgroundz" DropShadow="false"
                Drag="true">
            </ajaxToolkit:ModalPopupExtender>
            <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="PanelAddFilesInner">
            </ajaxToolkit:RoundedCornersExtender>
            <asp:Panel ID="PanelAddFilesOuter" runat="server" BackColor="Transparent" Style="display: none;">
                <asp:Panel ID="PanelAddFilesInner" runat="server" BackColor="White"  >
                 <ContentTemplate>
                    <div id="AddFilesContainer">
                        <br />
                        <div style="max-height:800px;overflow:auto;">
                                    <asp:TreeView ID="TreeViewAddItems" runat="server" BorderStyle="Solid" ShowCheckBoxes="Leaf"
                                        Width="99%" ImageSet="XPFileExplorer" NodeIndent="15" PathSeparator="\" ShowExpandCollapse="true"
                                        EnableClientScript="true" OnTreeNodeCheckChanged="OnTreeNodeCheckChanged" OnAdaptedTreeNodeCheckChanged="OnTreeNodeCheckChanged" ShowLines="True">
                                        <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
                                        <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
                                            NodeSpacing="0px" VerticalPadding="2px" />
                                        <ParentNodeStyle Font-Bold="False" />
                                        <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
                                            VerticalPadding="0px" />
                                    </asp:TreeView>
                                    </div>
                        <br />
                        <div class="base">
                        <asp:LinkButton ID="lnkAddToPendingList" runat="server" OnClick="BtnAddToPendingList_Click" BorderStyle="Solid" BackColor="#CCCCCC">Add selected items to list</asp:LinkButton>
                        <asp:Button CssClass="Button" ID="dummyButtonAddToPendingList" runat="server" Style="display: none;" />
                        <asp:Button CssClass="Button" ID="CancelAddFiles" runat="server" Text="Cancel" OnClientClick="$find('modalPopupExtenderAddFiles').hide(); return false;" />
                        </div>
                        </div>
                        </ContentTemplate>
                </asp:Panel>
            </asp:Panel>
            <!-- End Add Files Modal Form -->

Answer 1

查看生成的 HTML，并使用 CSS 设置样式。 CSS 可能看起来像这样：

.modal {
    display: block;
    width: 90%;
    height: 90%;
    margin: auto;
}