Home > .net 3.5, AJAX, Microsoft, Visual Studio 2008 > Layering Modal Popups using CSS Z-Index

Layering Modal Popups using CSS Z-Index

July 24, 2008

I really like the Modal Popup Extender (MPE) (see various articles here) and the “feel” that it adds to sites.  It’s useful for collecting information, changing information, or simply informing the user that something has happened.

But what happens when you need two popups at the same time?

In a recent project, I used the MPE to provide options when a user added or imported records into a system.  However, I also wanted to provide an UpdateProgress panel that would appear OVER the modal popup panel.  To do this, I needed to redefine the z-index css attributes to properly layer the controls.

My requirements were simple:

  • The MPE should appear over all “pages”.
  • The MPE “Backgrounds” (the BackgroundCssClass of the MPE) should appear just behind the MPE.
  • The UpdateProgress and it’s background should appear over EVERYTHING else.
  • The UpdateProgress and the MPEs should scroll and resize according to the browser.
  • Everything must be cross-browser (of course).

UPDATE: While this works BEAUTIFULLY in IE7, IE8, FF2, and FF3–-it totally borks out in IE6.  Working on a fix nowIE6 Causes Z-Index Nightmares

The Modal Popup Panel

The MPE

The modal popup panel is pretty standard.  The z-index of 1000 basically puts it above most everything else on the screen.

.ModalPopupPanel

{

    z-index: 1000;

    width: 400px;

    border: solid 2px #5D7B9D;

    background-color: #F5F5DC;

    padding: 10px 10px 10px 10px;

}

The UpdateProgress Popup Panel

The UpdateProgress Popup Panel

The UpdateProgress panel is also quite standard—a white box, border, and animated .gif image to keep users entertained during longer processes.  For this, the z-index is set outrageously high just for safety.  Remember: I want the UpdateProgress above EVERYTHING else.

.UpdateProgressPanel

{

/* UpdateProgressPanel is above EVERYTHING ELSE, even other modal popups */

       z-index: 99999999;

       background-color:#fff;

       color:#fff;

       width: 200px;

       text-align: center;

       vertical-align: middle;

       position: fixed;

       bottom: 50%;

       left: 45%;

       padding: 10px;

       border: solid 2px #5D7B9D;

      

}

The Modal Backgrounds

Behind the MPE and UpdateProgress backgrounds, you see a nice blue slate gray color, that’s handled by the ModalBackground class (the BackgroundCssClass attribute of the ModalPopupExtender control. 

.ModalBackground,

.UpdateProgressModalBackground

{

       background-color: #6D7B8D; /* Blue Slate Gray */

       position: fixed;

       top: 0;

       left: 0;

       height: 100%;

       width: 100%;

       min-height: 100%;

       min-width: 100%;

       filter:alpha(opacity=50);

       opacity:0.5;

       -moz-opacity: 0.5;

}

 

.ModalBackground

{

/* Just below a ModalPopupPanel */

    z-index: 999;

}

 

.UpdateProgressModalBackground

{

/* Above everything else, except an UpdateProgressPanel */

    z-index: 99999998;

}

To save some reuse, the ModalBackground and UpdateProgressModalBackground share the same attributes; however, I’ve specified the z-index separately to ensure that the UpdateProgressModalBackground appears ABOVE the regular ModalBackground. 

 

These combine to create a nice layered effect.  Now, even when a MPE is visible, the UpdateProgress still appears over it and prevents user entry.

 

UpdatePanel over MPE

 

 

 

 

About these ads
  1. Shijo Baby
    January 19, 2009 at 2:42 am | #1

    Hi,,

    I read this article GOOD !

    Thank u 4 giving me the idea tht we can put layer

    on modelpopup

    Regards
    ………………………

  2. seema
    August 12, 2009 at 3:30 am | #2

    can u pls help me out in fixing the popup problem for ie6…..
    This code is working fine in ie7,ie8,firefox, safari and chrome.
    pls tell me thefix for ie6

  3. August 12, 2009 at 6:27 am | #3

    @seema-

    Could you provide a bit more information into what your problem is?

Comments are closed.
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: