ModalPopupExtender 不会在 IE7/IE8 兼容模式下呈现在所有内容的前面答案

【问题标题】：ModalPopupExtender won't render in front of everything in IE7/IE8 Compatibility modeModalPopupExtender 不会在 IE7/IE8 兼容模式下呈现在所有内容的前面
【发布时间】：2010-11-29 04:26:47
【问题描述】：

我有一个来自 AjaxControlToolkit 的 ModalPopupExtender，它可以在 Firefox、Chrome 和 IE8 中正常工作，但是当我在 IE8 兼容模式下运行它时，它会弹出我页面内容的后面，而不是顶部。
弹出窗口位于由 Masterpage 呈现的用户控件中。我认为正在发生的是它在母版页内容前面弹出，因为母版页内容（我的标题和侧边栏）是灰色的，但内容占位符正在我的弹出窗口前面呈现。我在网上找到了一个解决方案，建议将母版页中的 doctype 声明更改为：

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

【问题讨论】：

我在 IE8 中遇到了一个问题，我的弹出窗口没有弹出到定义它们的所有父容器之上。无论 z-index 是什么，某些元素总是在顶部（有点像带有下拉菜单的 IE6）。在我的情况下，它只是一个充满控件的手，当弹出窗口弹出时我只是隐藏起来。不知道我的意思是什么，但只是想我会分享
这听起来与我所拥有的相似，但是当我弹出窗口时隐藏我的主页内容对我来说看起来很奇怪。

标签： asp.net internet-explorer ajaxcontroltoolkit modalpopupextender

【解决方案1】：

我刚刚在尝试解决相同问题时发现了您的帖子。对我来说，我将其追踪到一个名为 mainBody 的 div 标签，所有页面内容都包含在其中。控制这个 div 的 CSS 类有相对定位但没有 z-index。一旦我将 mainBody 的 z-index 设置为 -1，我的 modalPopup 就可以在 IE7 中完美运行。

希望这有帮助吗？！

【讨论】：

【解决方案2】：

您只能在 IE 中为您所在的父 div 设置 Z-index。较高的 div 将始终呈现在较低的 div 之上。我通过始终将 Modualwindow Div 直接放在标签之后解决了这个问题。如果它是第一个 div，它总是在顶部。

亨里克

【讨论】：

【解决方案3】：

我想补充一点，对于那些在 IE 10 兼容视图中遇到此问题的人来说，Z-index 确实是个问题，在本地网络上默认为 IE7 文档模式。

我将z-index: -1 用于html 和正文，然后必须转到z-index: 100 用于其他容器。弹出课程位于z-index: 999999；您需要针对您的网站进行调整。

【讨论】：

【解决方案4】：

这可能是您可以使用的解决方案：

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

我也遇到过这个问题...但是在我们并不真正支持 IE6/7 的预发布产品上。但是，我只是试了一下。确保在模式弹出窗口中包含控件的所有 div 都具有非常高的 z-index（例如 10001）。

【讨论】：

这很有希望，但没有奏效。我在我能做的所有东西上和周围都放了一个 z-index，但它仍然没有出现在我的占位符内容前面。

【解决方案5】：

如果您在 ASP.NET 项目中使用ModalPopupExtender（AjaxToolkit 4.1.50927.0 和 .Net 4.0.30319），您可能会在 IE7 和 IE8 中遇到同样的问题。弹出窗口将在 IE 9 中完全呈现，但不会在 IE7 和 IE8 中呈现。在这种情况下，请尝试删除 AnimationExtender（淡入）以使 ModalPopupExtender 工作正常。检查浏览器版本并通过 JS 为可以处理淡入效果的较新浏览器渲染动画代码，或者如果浏览器是 IE7，则不使用动画。

【讨论】：