I have dashboard/portal type site using DotNetNuke that contains several nested controls and modules.

There are two popups that work perfectly, however two other popups work ok, except that several page elements (divs, images, etc) appear on top of the grayed-out overlay.

I've seen a few posts about some of these elements having position:relative on them, but none of mine do. It's also weird that half of the popups do not act the same way.

I compared the attributes on the modalPopupExtender tag and they're all using the same thing.

I'm wondering if the location of the modalpopup call within the page or control has something to do with it. I'm posting my code, but I'm not sure how much one can glean from it. Like I said, this page has several controls and modules; this is probably going to be like looking for a needle in a haystack.

That said, I'm hoping maybe someone has experienced something similar and had figured out a solution. Any help is greatly appreciated. Thanks!

 <act:ModalPopupExtender id="eiMPE" runat="server" 
            TargetControlID="eiDummy" PopupControlID="eiPopUp" 
            BackgroundCssClass="modal-bg"/>
        
        
    <asp:Panel ID="eiPopUp" runat="server" Style="display:none;" 
               CssClass="popupPanel essential">
        <div class="popTop"><div></div></div>
        <asp:UpdatePanel ID="IEpopupUP" runat="server" ChildrenAsTriggers="true" 
                    UpdateMode="Always">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ShowItems" />
            </Triggers>
            <ContentTemplate>
                <div class="popupContent">
                    <asp:LinkButton ID="eiCancel" CssClass="popupCancel" runat="server" Text="Close"
                        OnClick="cancel_Click" CausesValidation="false" />
                    <uc1:EssentialItemsPopUp ID="EssentialItemsPopUp1" runat="server" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div class="popBot"><div></div></div>
    </asp:Panel>


<uc1:EssentialItemsPopUp.... > is a control containing the popup content code:


<div class="popup-essentials">
    <h1 style="width:auto !important;">
        ESSENTIAL ITEMS
    </h1>
</div>
<div class="popup-essentials popup-generic-container" align="center">
    <div id="header1" runat="server">
        <h2>
            Your Vault contains <strong><asp:Label ID="lblContains" runat="server" /></strong> 
            out of 
            <strong><asp:Label ID="lblTotal" runat="server" /></strong> essential items
        </h2>
    </div>
    <div id="headerFull" runat="server" class="header" visible="false">
        You have <em>all the essential items</em> loaded!
        <p class="smaller-header">Make sure you add all necessary details and attachments.</p>
    </div>
    
    <asp:Repeater ID="EssentialItems" runat="server" OnItemDataBound="EssentialItemsDataBound">
        <HeaderTemplate>
            <div class="icons-container">
        </HeaderTemplate>
        <ItemTemplate>
                <div>
                    <asp:Label ID="image" runat="server" />
                    <asp:Label ID="text" runat="server" />
                </div>
        </ItemTemplate>
        <FooterTemplate>
            </div>
        </FooterTemplate>
    </asp:Repeater>
</div>

Look up the 'z-index' property in css.  http://www.w3schools.com/Css/pr_pos_z-index.asp

You can control the order in which items are stacked on each other using it. 

I know what z-index is, thanks, but that's not it. The z-index on the modal background is 10000, and the popup itself is 10001. It should be on top of everything else; there is no z-index set on the elements that are peeping through.

Thanks anyway =)

I should also add that that this issue is ONLY occurring in the IEs, but not in FF3, FF2, Safari, Opera, Chrome.

Ok, so this was a case of position:relative (CSS) on one of the many nested divs encasing the modules that were peeping through. Removing this style or setting position:static fixed the issue. Hope this helps someone else.

Cheers!