AJAX ModalPopup Pops Behind (Under) Page Content (Negative z-index)

Question

I am having an issue with the AJAX ModalPopupExtender in version 40412 of the AJAX Control Toolkit (http://ajaxcontroltoolkit.codeplex.com/releases/view/43475).

The first time the ModalPopup is made visible it works correctly. The z-index is set to 6001 (and the background Div's z-index is set to 6000) and the Popup appears above everything else. If the cancel button within the ModalPopup is clicked, it also has the correct functionality, the display is set to "none" and the ModalPopup is no longer visible.

However, when the Popup is triggered again, the z-index is only set to 2000 which is still visible above everything else, but if it is canceled and triggered again it is set to -2000 which is not visible (the z-index is decreasing by 4000 each time).

I'm not sure why this is happening. Any ideas how to fix it?

Special circumstances:

• There are multiple ModalPopup's on the page.
• All ModalPopups are triggered in code-behind through partial-page postbacks (using the .Show() method)
• ModalPopupExtenders are within the same UpdatePanels that are displayed as popups

UPDATE: this was a confirmed bug by the project team. http://ajaxcontroltoolkit.codeplex.com/workitem/26739. It has now been fixed.

Answer 1

One workaround is to set the CSS for the ModalPopup as follows; This will override the in-line CSS applied to the element by the AJAX Control Toolkit.

.ModalPopup
{
    z-index: 6001 !important;
}
.ModalPopupBackground
{
    z-index: 6000 !important;
}

Answer 2

This doesn't work for me. I even tried setting all other elements to lower zIndex values like -100000 etc and still the modalpopup appears below all other elements. Is there another possible workaround usign javascript etc?

Answer 3

I just had a problem like this. Here is a quick fix that I came up with

<script type="text/javascript">
    onload = function() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(resetCounter);
    }
    function resetCounter(sender, args) {
        try {
            Sys.Extended.UI.ModalPopupBehavior._openCount = 0;
        } catch (ex) {
            // try-catch-throw away!
        }
    }
</script>

In the ExtendedModalPopup javascript it is calling hide on each partial page post back which does a _openCount--.

This is the code where the zindex is getting set based on the _opencount:

var zindex = 10000 + (Sys.Extended.UI.ModalPopupBehavior._openCount++ * 1000);

So _openCount is getting set to a negative number

Answer 4

This was a confirmed bug by the project team. http://ajaxcontroltoolkit.codeplex.com/workitem/26739. It has now been fixed.

From Team: We have confirmed that this is a bug that was in the initial release 40412. We have now replaced with a modified release that fixes this. Please download 40412 again to resolve this issue

Answer 5

In my case, the modalpopup works perfectly the first 10 times but the next time appears behind other components of the page. Setting z-index in css works for me, thank you!

.modalbackground {
    background-color: Gray;        
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 6000 !important;
    }    
.popup
    {        
    background-color:#FFF;
    padding:10px;     
    max-width:600px;
    z-index: 6001 !important;
    }

Answer 6

Setting the background to 6000 and the popup to 6001 worked for me; thanks, cause that bug was driving me nuts!

www.buddhadude.net