6

我有一个来自 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;
}
4

5 回答 5

1

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

我用于z-index: -1html 和 body，然后不得不去 az-index: 100用于其他容器。弹出课程位于z-index: 999999; 您需要针对您的网站进行调整。

于 2013-05-28T15:05:14.220 回答
1

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

希望这可以帮助？！

于 2009-11-17T02:58:33.463 回答
1

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

亨里克

于 2010-02-26T21:34:22.860 回答
0

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

ASP.net 中菜单和 ajax ModalPopupExtender 的 Z-index 问题

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

于 2009-09-17T15:09:03.163 回答
0

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

于 2012-02-23T10:28:59.817 回答