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

Question

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

Answer 1

使用Firebug（Firefox扩展）或类似的东西来检查菜单的Z-Index。然后将ModalPopupExtender的Z-Index 1设置得更高。

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

Answer 2

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

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

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

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

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

我希望这会有所帮助。

Answer 3

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

我给你的建议：使用另一个图书馆。我现在正在使用JQuery，你在网上找到的JQuery插件质量差别很大，但有些非常好，有些我自己也搞错了（我只选择能快速理解代码的那些）。

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

Answer 4

将z-index设置为像@Jab所提到的那样非常大。

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