Finding highest z-index of all elements

Question

I need to implement an alert-type modal popup that appears with a dimmed background. The problem is, we may have other elements on the page being showed that are also modals with z-indexes above default.

How do I determine the appropriate z-index that makes a given element the highest-layered element?

(jQuery is fine.)

Answer 1

Ideally, you should know, which elements you want to scan for z-index. Lets say if you are using some DIVs with "my-modal-class" CSS class as modal popup's then you can use something like this:

function getMaxZIndex()
{
   var allModalDialogs = $('DIV.my-modal-class');
   var zIndexMax = 0;
   allModalDialogs.each(function() {
     if ($(this).css('z-index') > zIndexMax) zIndexMax = $(this).css('z-index');
   });
   return zIndexMax;
}