Finding max z-index featuring in the current page

Question

I have to display a cache layer on the whole viewport (to then display a kind of dialog box).
Without surprise I create a <div> element with {position: fixed; top: 0 left: 0; width: 100%; height: 100%: background-color: #...; opacity: ...}.

But I faced the issue that I may encounter pages where some elements have a z-index other than 0 or auto.
So I must add a z-index property which surpasses the maximum one currently featuring in the page.

I'm currently using the following snippet:

var zMax = 0;
$('body *').each(function() {
  var zIndex = +$(this).css('zIndex'); // ("+" casts to number or NaN)
  if (zIndex > zMax) {
    zMax = zIndex;
  }
});

It works fine, but I'm not really happy with it: merely based on brute-force, it appears as "too easy" and a bit overkill.
I googled for other solutions and found a lot (notably on SO), but no one seems simpler than mine.

TL;DR; Is there some smarter alternative?

---

EDIT: to be more clear, here is an example of how the "cache layer" works:

$(document).ready(function() {
  $('#go, #goz').click(showDialog);
  
});
function showDialog() {
  $('body').append('<div id="cache" />');
  $('body').append('<div id="dialog"><p id="text" /><button id="cancel">Cancel</button></div>');
  $('#cancel').click(cancel);
  var text = 'Without z-index, cache doesn\'t cover image';
  if (this.id == 'goz') {
    $('#cache').css({zIndex: 101});
    $('#dialog').css({zIndex: 102});
    text = 'With z-index, cache covers all';
  }
  $('#text').html(text);
}
function cancel() {
  $('#dialog, #cache').remove();
}

#cache {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #444;
  opacity: .7;
}
img {
  position: relative;
  z-index: 100;
}
#dialog {
  position: fixed;
  left: 100px;
  top: 50px;
  width: auto;
  border: 1px solid #000;
  background-color: #fff;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Longe glabro ortus tempus crimina perquam notarius Magnentio odorandi in membra quos a perquam supergressus.</p>
<img src="https://i.sstatic.net/u65Rp.png?s=48&g=1">
<p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur.</p>
<button id="go">Go (simple)</button>
<button id="goz">Go (with z-index)</button>

Using the "Go (simple)" button, you see that the image is not covered by the cache (in this case, because it both has position: relative and a given z-index).
Using the "Go (with z-index)" button, we have set z-index of the cache and dialog layers to a sufficient value to overstrip any other element's ones (here it's hard coded).

The important point is that my tool snippet may be included everywhere, notably in the context of an existing app (like a CMS).
Since I obviously have no control over such an app, I must discover which is the current max z-index: then the cache and dialog layers will get this max value +1 (respectively +2).

Answer 1

While I understand you're looking for a snippet that works well on an underlying page you have no control over, any solution for such a problem would technically be a hack.

Your best bet, though certainly not a fool-proof solution, is to just use a very large or perhaps the maximum possible z-index (supposedly 2147483647, though certainly not standardised - I'd just go with something like 10000000) on your element.