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

Question

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

Answer 1

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

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

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

如果您的情况属于第二类，则类似的解释如下。

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

我希望这有帮助。

Answer 2

使用 Firebug(Firefox Extension) 或类似的东西来检查菜单的 Z-Index。然后将 ModalPopupExtender 的 Z-Index 设置为 1 更高。

如果没有看到实时页面，我无法猜测 z-index，但它必须大于 100。您可以尝试将其设置为 10001 或非常高的值。

Answer 3

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

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

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

Answer 4

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

我还发现，如果你将 ModalPopupExtender 放在 HTML 标记的底部，它有时会因为一些非常奇怪的原因修复它。试试看。