10% margin on popup

Question

how can i make this modal popup fill 80% of the screen in the x and y direction. i.e a margin of 10% on each side

Markup

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

Look at the resulting HTML, and style it with CSS. The CSS likely will look something like this:

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