Search code examples
c#ajaxcontroltoolkitmodalpopupextender

Set a popup control on top of another pop up control using z-index

i am trying to set my error popup control on top of another popup control. i know that z-index is the solution but nothing works. i've tried applying it to any/all divs and classes. what am i doing wrong?

Markup

<!-- Error Modal Form -->
    <asp:HiddenField ID="hideForModal" runat="server" />
    <ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
        TargetControlID="hideForModal" PopupDragHandleControlID="PanelErrorOuter" PopupControlID="PanelErrorOuter"
        OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true" >
    </ajaxToolkit:ModalPopupExtender>
    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server" TargetControlID="PanelErrorInner">
    </ajaxToolkit:RoundedCornersExtender>
    <asp:Panel ID="PanelErrorOuter" runat="server" BackColor="Transparent" Style="display:none; ">
        <asp:Panel ID="PanelErrorInner" runat="server" BackColor="White" Width="480" Height="300"   >
            <div id="ErrorInputContainer" style=" position:absolute; z-index:80000 !important;" >
                <div>
                    <b>Error Code:</b></div>
                <asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
                <div>
                    <b>Error Message:</b></div>
                <asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
                <div>
                    <b>Ex message:</b></div>
                <asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
                <br />
                <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
                <div id="Acknowledge">
                    <asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
                </div>
            </div>
            <br />
        </asp:Panel>
    </asp:Panel>
    <!-- End Error Modal Form -->
Solution

  • Z-index only works on positioned elements.

    You'll need to give the ErrorInputContainer position:absolute, position:relative, or position:fixed for the z-index to work.

    UPDATE

    If you choose to use absolute positioning, keep in mind that "top:" and "left:" positioning will be relative to the first non-static ancestor.

    All elements have "static" positioning by default - so you'll have to set "position:relative" in the css of another element if you want your pop-up to be positioned relative to that element.

    Example

    <!-- Relative to parent div -->
<div style="position:relative;">
   <div style="position:absolute; top:0px; left:0px;">
   </div>
</div>

<!-- Relative to document window -->
<div>
   <div style="position:absolute; top:0px; left:0px;">
   </div>
</div>