z-index can be pretty tricky. Check out this link for a concise (but thorough) explanation of stacking-order http://css-discuss.incutio.com/?page=OverlappingAndZIndex
There are a couple critical things to understand about stacking order.
- Source order counts
- When a z-index is specified a local stacking order is established
So if your modal is inside a div with no z-index and your updateProgressDiv is inside another div with no z-index specified (doesn't have to be a div, any containing element will do) then the element declared later in the page will be on top of the other.
For example:
<body>
<div>
<div id="updateProgressDiv">
<img />
</div>
</div>
<div>
<div id="modal"></div>
</div>
</body>
Since the div containing your modal was declared later it will stack on top of the updateProgressDiv. Okay, I think so anyways. z-index is confusing man.
See, the docs say that technically there is no local stacking order on the 2 containing divs because their z-index is set to auto by default. But I wouldn't trust that. If you really want to see your stacking order proper then you have to take complete control of it. Best solution would be to have your updateProgressDiv and your modalDiv inside the same container so they are in the same stacking context. Also, I don't know what the z-index gets set to by the AJAX framework.
Hope some of that helps.
Definitely read that link though.
Don't forget to click "Mark as Answer" if someone answers your question. Feel free to mark more than one answer, if you feel so inclined.