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

asp.net internet-explorer ajaxcontroltoolkit modalpopupextender
fr0man picture fr0man · Sep 17, 2009 · Viewed 15.3k times · Source

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;
}

Answer

Chris picture Chris · Nov 17, 2009

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?!

Related questions

How to enable Auto Logon User Authentication for Google Chrome

I have a site I go to that allows me to auto log in with my creditentials (windows) and using Internet Explorer I can just set the option under "User Authentication" to "Automatic logon with current user name and password", …

Read More
How to forcefully set IE's Compatibility Mode off from the server-side?

In a domain-controlled environment I'm finding that the compatibility mode is triggered on certain clients (winXP/Win7, IE8/IE9) even when we are providing a X-UA tags, a !DOCTYPE definition and "IE=Edge" response headers. These clients have the "display …

Read More
Stop Visual Studio from launching a new browser window when starting debug?

I already have a window open with the web site I'm debugging. I don't need VS to launch another one for me every time I need to debug. Is there a way to stop this behavior?

Read More