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

ajaxcontroltoolkit modalpopupextender
Aaron Hoffman picture Aaron Hoffman · May 10, 2010 · Viewed 10.3k times · Source

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

Aaron Hoffman picture Aaron Hoffman · May 10, 2010

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

Related questions

Positioning AJAX ModalPopupExtender in the center of the screen problem

I have problem with positioning ModalPopupExtender in the center of the screen when it's PopupDragHandleControlID property is set (without this property it works fine ). ModalPopupExtender is not positioned in the center of the screen. I thinks what causes the problem …

Read More
Make postback when the OkButton in a ModalPopup is clicked in ASP.NET AJAX

I follow the example in Atlas: Creating a Confirmation Using the ModalPopup Extender to make a postback when the OkButton in a ModalPopup is clicked (it uses the ModalPopupExtender that comes in ASP.NET Ajax Control Toolkit), but as I …

Read More
Use ModalPopupExtender without having to set TargetControlID?

I'd like to use a modalpopupextender in my asp.net page to show a sub form. But it only has to show on specific conditions. Those conditions are determined in a piece of javascript code. So, most importantly, the modal …

Read More