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

问题

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.

回答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;
}

回答2:

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

回答3:

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

回答4:

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;
    }

回答5:

A similar problem was introduced in version 15.1.4 of the toolkit if an Update Panel is involved. https://ajaxcontroltoolkit.codeplex.com/workitem/27971 At this Time it has not been fixed, but 15.1.3 does not show this problem.

来源：https://stackoverflow.com/questions/2805898/ajax-modalpopup-pops-behind-under-page-content-negative-z-index

标签

ajaxcontroltoolkit

modalpopupextender