Description of bug

If a DNN skin has any DOM-element with a z-index 2 or higher, dialogs in the Resource Manager are not visible. The DNN-Modal Backdrop has a -z-index of 1, but it should have a z-index of 1000 or even higher.

Steps to reproduce

1. Setup DNN 9.11.0 RC5
2. Adapt any Element in the DNN-Skin with a z-index greater than 1. E.g. apply this CSS-Rule: #dnn_ContentPane { z-index: 11; }
3. Open Resource Manager
4. Open any dialog (e.g. add folder)
5. The dialog is not visible and not usable

Current behavior

Dialogs in the Resource Manager are not working.

Expected behavior

Dialogs in the Resource Manager should be visible in common DNN skins.

Screenshots

Additional context

This affect lots of our DNN-skins. We use z-indexes between 1 and 100 for our own DOM-elements.

<dnn-modal><div id="backdrop"> must have a z-index of 1000 to overlap all elements on the page.

Bootstrap Modal and Angular Material Dialog use a z-index of 1000 or above for the backdrop. So 1000 is a common best practice.

The fix will be:

:host .overlay
{
  z-index: 1000
}

Affected version

• 09.11.00 release candidate 5

Affected browser

• Chrome