ModalPopupExtender and z-index

Question

How can I change ASP.NETAJAX ModalPopupExtender z-index. By default it is 100001. Thanks.

Answer 1

I assign a CSS class to the panel my modalpopupextender is assigned to (PopupControlID), and put somthing like:

.ModalSelect 
{
   z-index:70000 !important;
   /*other css*/ 
}

Answer 2

I use this function:

  function ShowModalPopup(modalPopupId, zIndex) {

    try {
      if (modalPopupId == null) throw new Error(0, 'Incorrect value of param modalPopupId!');

      var modalPopupBehavior = $find(modalPopupId);
      if (modalPopupBehavior == null) throw new Error(0, 'Not found modal popup ' + modalPopupId + '!');

      zIndex = typeof (zIndex) != 'undefined' ? zIndex : null;

      if (zIndex != null) {
        modalPopupBehavior._backgroundElement.style.zIndex = zIndex;
        modalPopupBehavior._foregroundElement.style.zIndex = zIndex + 1;
      }

      modalPopupBehavior.show();
    }
    catch (ex) {
      alert('Exception in ShowModalPopup: ' + ex.message);
    }
  }

and its call:

  ShowModalPopup('<%= modalpopup.ClientID %>', 20001);

Answer 3

You can hook up a handler to the shown event on the modalpopup that allows you to set the zIndex:

function pageLoad()
{
    var popup = $find('ModalPopupClientID');
    popup.add_shown(SetzIndex);
}

function SetzIndex(sender,args)
{
    sender._container.style.zIndex=9990001;
}