Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

charmcitycoder — Tue, 14 Jul 2009 15:56:08 GMT

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!

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

charmcitycoder — Tue, 14 Jul 2009 14:00:50 GMT

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

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

charmcitycoder — Tue, 14 Jul 2009 13:34:29 GMT

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 =)

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

IceDog711 — Sat, 11 Jul 2009 07:07:47 GMT

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.

Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

charmcitycoder — Thu, 09 Jul 2009 18:43:37 GMT

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>

ASP.NET AJAX Control Toolkit

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

Re: Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)

Modalpopupextender - random page elements appear in front of popup (should be behind dark overlay, inaccessible)