add global overlay component + add simple service for opening and closing

src/Umbraco.Web.UI.Client/src/common/services/overlay.service.js

@@ -0,0 +1,38 @@
+/**
+ @ngdoc service
+ * @name umbraco.services.overlayService
+ *
+ * @description
+ * <b>Added in Umbraco 8.0</b>. Application-wide service for handling overlays.
+ */
+(function () {
+    "use strict";
+
+    function overlayService(eventsService, backdropService) {
+
+        function open(overlay) {
+            if(!overlay.position) {
+                overlay.position = "center";
+            }
+            overlay.show = true;
+            backdropService.open();
+            eventsService.emit("appState.overlay", overlay);
+        }
+
+        function close() {
+            backdropService.close();
+            eventsService.emit("appState.overlay", null);
+        }
+
+        var service = {
+            open: open,
+            close: close
+        };
+
+        return service;
+
+    }
+
+    angular.module("umbraco.services").factory("overlayService", overlayService);
+
+})();

src/Umbraco.Web.UI.Client/src/controllers/main.controller.js

@@ -13,6 +13,7 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
     //the null is important because we do an explicit bool check on this in the view
     $scope.authenticated = null;
     $scope.touchDevice = appState.getGlobalState("touchDevice");
+    $scope.overlay = {};
 
 
     $scope.removeNotification = function (index) {
@@ -111,6 +112,7 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
         };
     }));
 
+    // events for drawer
     // manage the help dialog by subscribing to the showHelp appState
     $scope.drawer = {};
     evts.push(eventsService.on("appState.drawerState.changed", function (e, args) {
@@ -128,6 +130,12 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
         }
     }));
 
+    // events for overlays
+    evts.push(eventsService.on("appState.overlay", function (name, args) {
+        $scope.overlay = args;
+    }));
+    
+    // events for tours
     evts.push(eventsService.on("appState.tour.start", function (name, args) {
         $scope.tour = args;
         $scope.tour.show = true;
@@ -141,6 +149,7 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
         $scope.tour = null;
     }));
 
+    // events for backdrop
     evts.push(eventsService.on("appState.backdrop", function (name, args) {
         $scope.backdrop = args;
     }));

src/Umbraco.Web.UI/umbraco/Views/Default.cshtml

@@ -87,6 +87,13 @@
         disable-events-on-click="backdrop.disableEventsOnClick">
     </umb-backdrop>
 
+    <umb-overlay
+        ng-if="overlay.show"
+        model="overlay"
+        position="{{overlay.position}}"
+        view="overlay.view">
+    </umb-overlay>
+
     <umb-overlay
         ng-if="ysodOverlay.show"
         model="ysodOverlay"