ModalPopupExtender 不会在 IE7/IE8 兼容模式下呈现在所有内容前面
我有一个来自 AjaxControlToolkit 的 ModalPopupExtender，它可以在 Firefox、Chrome 和 IE8 中正常工作，但是当我在 IE8 兼容模式下运行它时，它会弹出在我的页面内容后面，而不是顶部。
弹出窗口位于由母版页呈现的用户控件中。我认为正在发生的事情是它在母版页内容前面弹出，因为母版页内容（我的标题和侧边栏）呈灰色，但内容占位符在我的弹出窗口前面呈现。我在网上找到了一个解决方案，建议将母版页中的文档类型声明更改为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
但我已经有了确切的声明，但仍然存在定位问题。这是弹出代码：
<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>
以及相关的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 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我刚刚在尝试解决同样的问题时发现了您的帖子。对我来说，我将其追踪到一个名为 mainBody 的 div 标签，所有页面内容都包含在其中。控制该 div 的 CSS 类具有相对定位，但没有 z-index。一旦我将 mainBody 的 z-index 设置为 -1，我的 modalPopup 在 IE7 中就可以完美运行。
希望这有帮助？
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?!
您只能在 IE 中为您所在的父 div 设置 Z-index。
较高的 div 将始终呈现在较低的 div 之上。
我通过始终将 Modualwindow Div 直接放在标签后面解决了这个问题。
如果它是第一个 div，它总是在顶部。
亨里克
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
我想补充一点，Z-index 确实是那些在 IE 10 兼容视图中遇到此问题的人的问题，该视图在本地网络上默认为 IE7 文档模式。
我使用
z-index: -1作为 html 和 body，然后必须使用z-index: 100作为其他容器。弹出类位于z-index: 999999；您需要针对您的网站进行调整。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: -1for the html and body, and then had to go to az-index: 100for the other containers. The pop-up classes are at az-index: 999999; You'll need to adjust for your site.这可能是您可以使用的解决方案：
ASP.net 中菜单的 Z 索引和 ajax ModalPopupExtender 中的问题
我也遇到过这个问题...但是在预发布产品上我们并不真正打算支持 IE6/7。但是，我刚刚尝试过。确保在模态弹出窗口中保存控件的所有 div 都具有非常高的 z-index（例如 10001）。
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).
如果您在 ASP.NET 项目中使用
ModalPopupExtender（AjaxToolkit 4.1.50927.0 和 .Net 4.0.30319），则在 IE7 和 IE8 中可能会遇到同样的问题。弹出窗口将在 IE 9 中完全呈现，但在 IE7 和 IE7 中不会呈现。 IE8。在这种情况下，请尝试删除AnimationExtender（淡入），以便ModalPopupExtender正常工作。检查浏览器版本，并通过 JS 为较新的浏览器渲染动画代码，这些浏览器可以处理淡入效果，或者如果浏览器是 IE7，则不使用动画。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 theAnimationExtender(fade in) for thatModalPopupExtenderit 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.