ASP.net 中菜单 Z 索引和 ajax ModalPopupExtender 的问题
我使用 Ajax ModalPopupExtender 但问题是应用程序中的菜单显示在 ModalPopupExtender 上。 我还为 ModalPopupExtender 设置了 z-index=1 ，为 z-index=100 设置了 z-index=100 但问题没有解决。
I using Ajax ModalPopupExtender but problem with this is menu in appication is display over the ModalPopupExtender. I also set z-index=1 for ModalPopupExtender and z-index=100 for but problem not solved.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
经过几分钟学习如何使用开发工具（Chrome/IE 上的 F12），我终于找到了问题的根源。
我将假设以下两件事之一为真：
1. 您的主菜单位于母版页上，并且 ModalPopupExtender 控件位于子页面内。
2. ModalPopupExtender 控件放置在保存页面其余内容（主菜单除外）的同一 div 中，并且该 div 的 z-index 低于包含主菜单的 div。 （即使您没有明确指定这些 z-index 值，这些 div 也会自动继承值。）
如果您的情况属于第一类，那么会发生以下情况：生成的标记将 lightbox 放置在一个 div 内，同时子页面内容的其余部分（例如wrapperContent），以及另一个页面中的主菜单（例如wrapperHeader）。 wrapperHeader 的 z 索引必须大于wrapperContent 的 z 索引，否则子菜单在下拉时将落在内容下方。 现在，无论您为灯箱指定什么 z-index 值，它都将始终显示在wrapperHeader 内的每个元素下，因为它从wrapperContent 继承其z-index，该z-index 低于wrapperHeader。
如果您的情况属于第二类，也会有类似的解释。
@Jack Marchetti 这也解释了为什么当您将灯箱放置在其自己的 div 中（与页面其余部分的内容分开）时，此问题会被修复。
我希望这有帮助。
After a few minutes of learning how to use Developer Tools (F12 on Chrome/IE), I finally got to the root of the problem.
I'm going to assume one of two things to be true here:
1. Your Main Menu is either on a Master Page, and the ModalPopupExtender control is inside a Child page.
2. The ModalPopupExtender control is placed within the same div that holds the rest of the page's content (except for the Main Menu) and this div has a z-index lower than the div that contains the Main Menu. (Even if you haven't specified these z-index values explicitly, these divs will inherit values automatically.)
If your situation falls into the first category, then here's what's going on: The generated markup places the lightbox inside one div, along with the rest of the child page's content (say wrapperContent), and the Main Menu inside another (say wrapperHeader). The z-index for wrapperHeader MUST be more than the z-index of wrapperContent, or else the submenus will fall beneath the content when they drop down. Now no matter what value of z-index you specify for the lightbox, it will always be displayed under every element inside wrapperHeader, since it inherits its z-index from wrapperContent, which is lower than that of wrapperHeader.
A similar explanation follows in case your situation falls into the second category.
@Jack Marchetti this also explains why this is fixed when you place the lightbox in a div of its own, seperated from the content of the rest of the page.
I hope this helps.
使用 Firebug（Firefox 扩展）或类似的东西来检查菜单的 Z-Index。 然后将 ModalPopupExtender 的 Z-Index 1 设置得更高。
如果没有看到实时页面，我无法猜测 z-index，但它必须大于 100。您可以尝试将其设置为 10001 或非常高的值。
Use Firebug(Firefox Extension) or something similar to inspect the Z-Index of your menu. Then set the ModalPopupExtender's Z-Index 1 higher.
Without seeing a live page, I can't guess the z-index, but it must be greater than 100. You can try setting it to 10001 or something wildly high.
我从事Asp.Net开发大约有4年了，我的经验告诉我远离微软的AJAX库尤其是AJAX Control Toolkit。 其中存在一些他们似乎无意修复的错误。
我给你的建议是：使用另一个库。 我现在正在使用 JQuery，你在网上找到的 JQuery 插件质量参差不齐，但其中一些非常好，另一些我自己修复了错误（我只选择那些我可以快速理解代码的插件）。
JQuery UI 具有非常高的质量，它包括我正在使用的对话框小部件，而不是 ModalPopupExtender。 如果您不喜欢窗口样式，请查看此页面上提供的 15 个插件之一：15+ jQuery 弹出模式对话框插件和教程。
I have done Asp.Net development for around 4 years, my experience tells me to stay away from Microsoft's AJAX libraries especially AJAX Control Toolkit. There are bugs in there that they don't seem intent on fixing.
My advice to you: Use another library. I am using JQuery now, the plugins you find for JQuery on the net are of widely varying quality but some of them are really good and others I have bugfixed myself (I only choose the ones where I can quickly understand the code).
JQuery UI has a very high quality, it includes a dialog widget I am using instead of the ModalPopupExtender. If you dont like the window style, check out one of the 15 plugins presented on this page: 15+ jQuery Popup Modal Dialog Plugins and Tutorials.
将 z-index 设置为像 @Jab 提到的非常大的值。
我还发现，如果您将 ModalPopupExtender 放置在 HTML 标记的底部，有时它会因为一些非常奇怪的原因修复它。 试一试。
Set the z-index to something reallly large like @Jab mentioned.
I also found that if you place the ModalPopupExtender at the bottom of your HTML Markup, it sometimes fixes it for some very strange reason. Give it a try.