Multiple Modal POPUPS and Z-Index

  • Article

AJAX modal popup extender gives developers ability to show javascript based modal windows. This powerful extender can be used to show editing UI, progress bars and/or error messages etc. This does pose some challenges specially when there are two modal popups that get invoked. During some of my tests, popups seemed to be displayed in an order where one popup is hidden beneath other popup. This is specially true when showing progress popups when an popup is already on the page.

This problem can be easily solved by using larger z-index values for popup css classes. Ensure that progress window is always higher than the rest of z-index. Here is a sample css classes for progress and regular popups.

 .modalBackground 
{    
    position:absolute;
    z-index:10000;
}

.modalWindow
{
    position:absolute;
    z-index:10001;
}

/* Separate css element for error modals to specify 
z-index to get the popup on top of all existing popups*/
.progressModalWindow
{
    z-index:11000;
    position:absolute;
}

.progressModalBackground 
{
    z-index:10999;
    position:absolute;
}

Additionally I changed the AjaxControlToolkit/ModalPopup/ModalPopupBehavior.js to ensure that these custom values are used for styling. Because toolkit default code contains hardcoded z-index values. Comment the lines 118 and 126.

 this._backgroundElement.style.zIndex = 10000; //Comment this line. 118
....
....
....
//Comment this line. 126
this._foregroundElement.style.zIndex = 
$common.getCurrentStyle(this._backgroundElement, 'zIndex', 
this._backgroundElement.style.zIndex) + 1;

Once you comment the two lines, your css elements should take over and should provide the necessary z-index order to the popup div’s.

Thanks

Anil