Send Menu to back or Lock screen while processing

[Bernie]

Hi,

I am trying to implement functionality where by all the controls on my aspx are covered by a div during a long running process.
This is for a  business app which will run on IE6. (Yes I know.)
I am trying to place a div over all controls on the page from the OnClientClick event of a button contained in an ascx which is on an aspx.
It almost works, however, even when I set the z-index of the div to 1000000 the Rad Menu is still on top. When I check the z-index using the IE Developer Toolbar it says that the Rad Menu z-index is 7000 (the default) and the div is 1000000. See the .jpg attached.
When I set the z-index of the menu to less than the ascx then it works, however, that means that the menu drop downs are also covered. 

So why is the menu on top? How can I cover all the controls to stop users fiddling while the upload is running?
Is there a way to temporarily bring the ascx to the front while processing and then send it back when finished?

Any help is appreciated.

Here is my code.
default.master that contains a RadMenu and content place holders contp1 and contp2.
BulkLoad.aspx which is derived from  default.master. 
 

<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true"
    CodeBehind="BulkLoad.aspx.cs" Inherits="MyProject.WebApp.BulkLoad" %>

<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Controls/BulkUploadControl.ascx" TagName="BulkUpload" TagPrefix="cag" %>
<%@ Register Src="~/Controls/BulkUploadAuditControl.ascx" TagName="BulkUploadAudit"
    TagPrefix="cag" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BottomPane" runat="server">

    <br />
    <div class="level2_tabstrip">
        <rad:RadTabStrip RegisterWithScriptManager="true" AutoPostBack="True" SelectedIndex="1"
            MultiPageID="RadMultiPage1" ID="rtsBulkLoad" runat="server" Skin="WebBlue">
            <Tabs>
                <rad:RadTab Text="Upload" PageViewID="Upload" Selected="True">
                </rad:RadTab>
                <rad:RadTab Text="Audit" PageViewID="Audit">
                </rad:RadTab>
            </Tabs>
        </rad:RadTabStrip>
    </div>
    <div class="level2_content">
        <rad:RadMultiPage RenderSelectedPageOnly="true" ID="RadMultiPage1" runat="server"
            SelectedIndex="1" Width="900">
            <rad:RadPageView ID="Upload" runat="server" Selected="true">
                <cag:BulkUpload runat="server" ID="BulkUpload1" BatchTypeDesc="" />
            </rad:RadPageView>
            <rad:RadPageView ID="Audit" runat="server">
                <cag:BulkUploadAudit runat="server" ID="BulkUploadAudit1" BatchTypeDesc="" />
            </rad:RadPageView>
        </rad:RadMultiPage>
    </div>
</asp:Content>

The BulkUploadControl contains this:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BulkUploadControl.ascx.cs"
    Inherits="Myproject.WebApp.Controls.BulkUploadControl" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<script language='javascript' type='text/javascript'>
    function showLoading() {
        document.getElementById('blackOut').style.display = 'block';
        document.getElementById('blackOut').style.height = '500px';
        document.getElementById('blackOut').style.width = '942px';
    }
</script>

<rad:RadWindowManager ID="RadWindowManager1" runat="server" />
<asp:Panel runat="server" ID="pnlAccessDenied" Visible="true">
    You do not have permission for this function
</asp:Panel>
<asp:Panel runat="server" ID="pnlAccessOk" Visible="false">
    <br />
    <asp:Label ID="lblTitle" Font-Bold="True" Font-Size="X-Large" runat="server" Font-Names="Arial"></asp:Label>
    <br />
    <br />
    <asp:Label ID="lblText" Font-Bold="False" Font-Size="Small" runat="server" Font-Names="Arial"></asp:Label>
    <br />
    <br />
 <div id="blackOut" style="display: none; z-index: 1000000; position: absolute; background-color: black;
        filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; top: -300px;
        left: -10px; height: 1000px; width: 1500px;">
        <table width="1000px" style="height:1000px;">
            <tr>
                <td align="center" valign="middle" >
                    <h2 style="color: White; font-weight: bold">
                        Processing...</h2>
                </td>
            </tr>
        </table>
    </div>
    <table width="850" border="0" cellspacing="0" cellpadding="10" class="table_grid">
        <tr>
            <td>
                <b>Upload</b>
            </td>
            <td>
                <asp:Label runat="server" ID="lblReportingPeriodStatus" ForeColor="Red" Visible="false"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="100%">
                <input class="textbox" size="100" type="file" id="File1" runat="server" name="File1" />
                <asp:Button ID="buttonSubmit" class="button" runat="server" OnClick="btnSubmit_OnClick"
                    OnClientClick="showLoading();" Text="Upload" Height="23px" />
                <br />
                <br />
                <table width="850" class="table_grid3">
                    <tr>
                        <td width="200">
                            Local Path
                        </td>
                        <td class="td_clear">
                            <asp:Label runat="server" ID="lblLocalPath"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Batch ID
                        </td>
                        <td class="td_clear">
                            <asp:Label runat="server" ID="lblBatchID"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Loaded to Staging
                        </td>
                        <td class="td_clear">
                            <asp:Image ID="Image2a" runat="server" ImageUrl="~/Images/gtick01.gif" Visible="false" />
                            <asp:Image ID="Image2b" runat="server" ImageUrl="~/Images/gcross01.gif" Visible="false" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Status Message
                        </td>
                        <td class="td_clear">
                            <asp:Label runat="server" ID="lblStatusMessage"></asp:Label>
                        </td>
                    </tr>
                </table>
                <asp:Label runat="server" ID="lblSaveResults"></asp:Label><br />
                <asp:Label runat="server" ID="lblLoadResults"></asp:Label><br />
            </td>
        </tr>
    </table>
    <br />
    <rad:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowAutomaticDeletes="false"
        AllowAutomaticInserts="false" AllowAutomaticUpdates="false" OnItemDataBound="RadGrid1_ItemDataBound"
        EnableAJAX="True" Width="850px" AllowPaging="True" PageSize="50" Skin="WebBlue"
        Visible="false">
        <PagerStyle AlwaysVisible="true" Mode="NumericPages" />
        <SelectedItemStyle CssClass="selectedItem" />
        <EditItemStyle CssClass="selectedItem" />
        <ExportSettings IgnorePaging="true" />
        <MasterTableView CommandItemDisplay="Top" GridLines="Horizontal" EditMode="EditForms"
            TableLayout="Auto" AutoGenerateColumns="False">
            <CommandItemSettings ShowExportToCsvButton="true" />
            <Columns>
                <rad:GridBoundColumn Visible="false" UniqueName="field1" HeaderText="field1"
                    DataField="field1" />
                <rad:GridBoundColumn HeaderStyle-Width="50px" UniqueName="Row" HeaderText="Row" DataField="Row" />
                <rad:GridBoundColumn HeaderStyle-Width="50px" UniqueName="Column" HeaderText="Column"
                    DataField="Column" />
                <rad:GridBoundColumn HeaderStyle-Width="100px" UniqueName="ColumnName" HeaderText="Column Name"
                    DataField="columnName" />
                <rad:GridBoundColumn HeaderStyle-Width="100px" UniqueName="ColumnType" HeaderText="Column Type Expected"
                    DataField="columnType" />
                <rad:GridBoundColumn HeaderStyle-Width="100px" UniqueName="ColumnValue" HeaderText="Column Value"
                    DataField="columnValue" />
                <rad:GridBoundColumn UniqueName="ErrorText" HeaderText="Error" DataField="ErrorText" />
            </Columns>
        </MasterTableView>
    </rad:RadGrid>
</asp:Panel>

[Kate]

Hello Bernie,

Did you try to set a z-index to the controls whose absolute position you need to keep track on? For example if you have a menu, a div and a third control, you could try to set a z-index to all of them, thus explicitly indicating which one will be on top of the other?

Regards,
Kate
the Telerik team