Add backdrop to "user overlay" (#7956)

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function AppHeaderDirective(eventsService, appState, userService, focusService) {
+    function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -72,12 +72,14 @@
 
             scope.avatarClick = function () {
                 if (!scope.userDialog) {
+                    backdropService.open();
                     scope.userDialog = {
                         view: "user",
                         show: true,
                         close: function (oldModel) {
                             scope.userDialog.show = false;
                             scope.userDialog = null;
+                            backdropService.close();
                         }
                     };
                 } else {

src/Umbraco.Web.UI.Client/src/less/components/overlays.less

@@ -2,7 +2,7 @@
     position: fixed;
     overflow: hidden;
     background: @white;
-    z-index: @zindexUmbOverlay;
+    z-index: 7501;
     animation: fadeIn 0.2s;
     box-shadow: 0 10px 50px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.16);
     text-align: left;