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

Posted 2023-03-06

技术标签:

【中文标题】ASP.net 中菜单和 ajax ModalPopupExtender 的 Z-index 问题【英文标题】：Problem in Z-index of menu and ajax ModalPopupExtender in ASP.net 【发布时间】：2010-11-04 07:39:16 【问题描述】：

我使用 Ajax ModalPopupExtender，但问题是应用程序中的菜单显示在 ModalPopupExtender 上。我还为 ModalPopupExtender 设置了 z-index=1，为但问题未解决设置了 z-index=100。

【问题讨论】：

【参考方案1】：

在学习了如何使用开发者工具（Chrome/IE 上的 F12）几分钟后，我终于找到了问题的根源。

我将假设以下两件事中的一件是正确的： 1. 您的主菜单位于母版页上，而 ModalPopupExtender 控件位于子页内。 2. ModalPopupExtender 控件放置在包含页面其余内容（主菜单除外）的同一 div 中，并且此 div 的 z-index 低于包含主菜单的 div。（即使您没有明确指定这些 z-index 值，这些 div 也会自动继承值。）

如果您的情况属于第一类，那么情况如下：生成的标记将灯箱与子页面的其余内容（例如 wrapperContent）放在一个 div 中，将主菜单放在另一个 div 中（例如包装头）。 wrapperHeader 的 z-index 必须大于 wrapperContent 的 z-index，否则子菜单在下拉时将落在内容下方。现在无论您为灯箱指定什么 z-index 值，它都会始终显示在 wrapperHeader 内的每个元素下，因为它继承自 wrapperContent 的 z-index，低于 wrapperHeader 的 z-index。

如果您的情况属于第二类，请进行类似的解释。

@Jack Marchetti 这也解释了为什么当您将灯箱放置在它自己的 div 中时，这个问题是固定的，与页面其余部分的内容分开。

我希望这会有所帮助。

【讨论】：

【参考方案2】：

我已经做了大约 4 年的 Asp.Net 开发，我的经验告诉我要远离微软的 AJAX 库，尤其是 AJAX Control Toolkit。那里有一些错误，他们似乎并不打算修复。

我给你的建议：使用另一个库。我现在正在使用 JQuery，您在网上找到的 JQuery 插件质量参差不齐，但其中一些非常好，而另一些我自己修复了错误（我只选择我可以快速理解代码的那些）。

JQuery UI 具有非常高的质量，它包括一个我正在使用的对话框小部件，而不是 ModalPopupExtender。如果您不喜欢窗口样式，请查看此页面上提供的 15 个插件之一：15+ jQuery Popup Modal Dialog Plugins and Tutorials。

【讨论】：

【参考方案3】：

将 z-index 设置为像 @Jab 提到的非常大的东西。

我还发现，如果您将 ModalPopupExtender 放在 html 标记的底部，它有时会出于某种非常奇怪的原因修复它。试一试。