ModalPopupExtender and z-index

Question

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

Answer 1

Change the z-index on the ModalPopupExtender.BackgroundCssClass:

Markup:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
 TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="ModalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" />

CSS:

.ModalBackground
{

    /*other css*/
    z-index: 100000111; 

}

Answer 2

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

Answer 3

Hi, guys!

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