在IE7 / IE8兼容模式下,ModalPopupExtender不会呈现在所有内容之前

时间:2009-09-17 14:36:42

标签: asp.net internet-explorer ajaxcontroltoolkit modalpopupextender

我有一个来自AjaxControlToolkit的ModalPopupExtender,它可以在Firefox,Chrome和IE8中正常运行,但是当我在IE8兼容模式下运行时,它会弹出我页面的内容,而不是顶部。
弹出窗口位于由主页面呈现的用户控件中。我认为正在发生的是它正在主页面内容中出现,因为主页内容(我的标题和侧边栏)显示为灰色,但内容占位符在我的弹出窗口前呈现。我在网上找到了一个解决方案,建议将母版页中的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;
}

5 个答案:

答案 0 :(得分:1)

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

希望这有帮助吗?!

答案 1 :(得分:1)

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

的Henrik

答案 2 :(得分:1)

我想补充一点,Z-index确实是IE 10 compat视图中遇到的问题,在本地网络上默认为IE7 doc模式。

我使用z-index: -1作为html和正文,然后必须转到其他容器的z-index: 100。弹出类位于z-index: 999999;您需要针对您的网站进行调整。

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

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