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

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.