Share via

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

Comments

  • Anonymous
    December 18, 2009
    Great Solution,But when i test this IE 6, the background is not fixed and scroll is coming in background.So Size of the overlay is fixed but size of the background increases.
  • Anonymous
    May 04, 2011
    Check this also...chamilaw.blogspot.com/.../can-not-put-more-than-one-modalpopup.html
  • Anonymous
    October 10, 2011
    The comment has been removed