Geek Answers Handbook

ModalPopupExtender will not be displayed in front of everything in compatibility mode with IE7 / IE8

I have a ModalPopupExtender from AjaxControlToolkit that works correctly in Firefox, Chrome and IE8, but when I run it in IE8 compatibility mode, it appears behind the contents of my page, and not at the top.
The pop-up window is located in the user control, which is displayed on the main page. What I think is happening is popping up in front of the contents of the main page, since the contents of the main page (my title and sidebars) are grayed out, but the content placeholders are rendered in front of my popup. I found a solution on the Internet that suggested changing the doctype declaration on the home 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 this exact announcement and still a 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 corresponding 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; }
+6
internet-explorer ajaxcontroltoolkit modalpopupextender
source share
5 answers

I just found your post trying to solve the same problem. For me, I tracked it down to a div tag called mainBody, which contains all the content on the page. The CSS class that controls this div has relative positioning, but not z-index. Once I set the z-index to -1 for mainBody, my modalPopup worked fine in IE7.

Hope this helps ?!

+1
source share

You can only set the Z-index in IE for the parent div you are in. The div subsection above will always be displayed on top of your bottom div. I solved the problem by always adding a Modualwindow Div directly after the tag. If this is the first div, it is always on top.

Henric

+1
source share

I would like to add that the Z-index is indeed a problem for those who work with this in the compatibility view of IE 10, which by default works in IE7 doc mode on the local network.

I used z-index: -1 for html and body, and then had to go to z-index: 100 for other containers. Popup classes have z-index: 999999 value z-index: 999999 ; You will need to set up your site.

+1
source share

This may be a solution that you can use:

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

I also came across this problem ... but on a preliminary product that we were not going to support IE6 / 7. But I just tried it. Make sure that all divs that contain your controls in the modal pop-up menu have a really high z index (e.g. 10001).

0
source share

If you use ModalPopupExtender (AjaxToolkit 4.1.50927.0 and .Net 4.0.30319) in an ASP.NET project, you may encounter the same problem with IE7 and IE8. The popup will be fully displayed in IE 9, but not in IE7 and IE8. In this case, try removing AnimationExtender (fade in) for this ModalPopupExtender , it works fine. Check the browser version and pass the animation code through JS for new browsers that may handle the fading effect or not use the animation if the browser is, say, IE7.

0
source share

More articles:


All Articles