ModalPopupExtender won't render in front of everything in IE7/IE8 Compatibility mode

Question

I have a ModalPopupExtender from the AjaxControlToolkit that is working properly in Firefox, Chrome and IE8, but when I run it in IE8 Compatibility mode, it pops up behind the content of my page, rather than on top.
The popup is in a user control that's rendered by the Masterpage. What I think is happening is it's popping up in front of the master page content, as the Masterpage content (my header and sidebars) is greyed out, but the content placeholders are rendering in front of my popup. I found a solution online that suggested changing your doctype declaration in the master page to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But I already had that exact declaration and still have the positioning problem. Here is the popup code:

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    TargetControlID="lnkbtnDealerID"
    PopupControlID="pnlPopup"
    BackgroundCssClass="modalBackground"
    DropShadow="true"
    OkControlID="OkButton"
    CancelControlID="CancelButton"
    OnOkScript=""
    >
</cc1:ModalPopupExtender>

  <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none"     Width="233px">
   <p>Are you sure?  Your current shopping cart is valid only for the current Dealer ID.      Switching Dealer IDs will reset your cart according to the new Dealer ID chosen.</p>

   <br />
   <div align="center">
      <asp:Button ID="OkButton" runat="server" Text="Ok" />
      <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
   </div>
   </asp:Panel>

And the relevant CSS:

.popupControl {
    background-color: white;
    position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:white;
border-width:1px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

I had an issue in IE8 with my popups not popping up above all the parent containers they were defined in. Some elements no matter what the z-index was would always be on top (kind of like in IE6 with the drop down). In my case it was only a hand full of controls which I simply hide when the popup pops up. Not sure what my point is but just thought I'd share — JoshBerke, Sep 17 '09 at 14:43
That sounds similar to what I have, but it would look odd for me to hide my main page content when I do the popup. — fr0man, Sep 17 '09 at 14:49

score 1 · Answer 1 · edited May 28 '13 at 15:22

1

I'd like to add that Z-index is indeed the issue for those running into this in IE 10 compat view, which defaults to IE7 doc mode on a local network.

I used z-index: -1 for the html and body, and then had to go to a z-index: 100 for the other containers. The pop-up classes are at a z-index: 999999; You'll need to adjust for your site.

edited May 28 '13 at 15:22

Daniel

10,864
22
84
115

answered May 28 '13 at 15:05

Jason Honingford

540
5
17

score 1 · Answer 2 · answered Nov 17 '09 at 02:58

I just found your posting whilst trying so solve the same problem. For me I tracked it down to a div tag, called mainBody, which all page content is contained within. The CSS class that controls this div has relative positioning but no z-index. As soon as I set the z-index to -1 for mainBody my modalPopup worked perfectly in IE7.

Hope this helps?!

score 1 · Answer 3 · answered Feb 26 '10 at 21:34

You can only set the Z-index in IE for the parent div you are in. A div higher up will always render on top of your lower div. I solved the problem by Always put the Modualwindow Div directly after the tag. If it's the first div it's always on top.

Henrik

score 0 · Answer 4 · edited May 23 '17 at 10:32

0

This might be a solution you can use:

Problem in Z-index of menu and ajax ModalPopupExtender in ASP.net

I have been running into this issue too... but on a prerelease product that we weren't really going to support for IE6/7. But, I just tried it out. Make sure that all of the divs that hold your controls in the modal popup have a really high z-index (like 10001).

edited May 23 '17 at 10:32

Community

1
1

answered Sep 17 '09 at 15:09

Chris

2,959
1
30
46

This was promising, but didn't work. I put a z-index on and around everything I could and it's still not popping in front of my placeholder content. – fr0man Sep 17 '09 at 16:17

score 0 · Answer 5 · edited Oct 29 '12 at 15:28

If you use the ModalPopupExtender (AjaxToolkit 4.1.50927.0 and .Net 4.0.30319) in an ASP.NET project, you may face the same problem with IE7 and IE8. The Popup window will be completely rendered in IE 9 but not in IE7 & IE8. In that case, try removing the AnimationExtender (fade in) for that ModalPopupExtender it works fine. Check the browser version and render the code for the animation via JS for newer browsers that can handle the fade in effect or do not use the animation if the browser is, say, IE7.

ModalPopupExtender won't render in front of everything in IE7/IE8 Compatibility mode

5 Answers5