diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
index 2a1d047ca1..85fcc249f9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -376,14 +376,3 @@ a.umb-variant-switcher__toggle {
 	margin-right: auto;
 	padding-right: 10px;
 }
-
-/* Confirm */
-.umb-editor-confirm {
-	background-color: @white;
-	padding: 20px;
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	z-index: 10;
-	box-shadow: 0 -3px 12px 0px rgba(0,0,0,0.16);
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
index 75bf414099..c9d2e43a98 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function CompositionsController($scope, $location, $filter) {
+    function CompositionsController($scope, $location, $filter, overlayService) {
 
         var vm = this;
         var oldModel = null;
@@ -56,19 +56,35 @@
             if ($scope.model && $scope.model.submit) {
 
                 // check if any compositions has been removed
-                vm.compositionRemoved = false;
+                var compositionRemoved = false;
                 for (var i = 0; oldModel.compositeContentTypes.length > i; i++) {
                     var oldComposition = oldModel.compositeContentTypes[i];
                     if (_.contains($scope.model.compositeContentTypes, oldComposition) === false) {
-                        vm.compositionRemoved = true;
+                        compositionRemoved = true;
                     }
                 }
 
                 /* submit the form if there havne't been removed any composition
                 or the confirm checkbox has been checked */
-                if (!vm.compositionRemoved || vm.allowSubmit) {
-                    $scope.model.submit($scope.model);
+                if (compositionRemoved) {
+                    vm.allowSubmit = false;
+                    const dialog = {
+                        view: "views/common/infiniteeditors/compositions/overlays/confirmremove.html",
+                        submitButtonLabelKey: "general_ok",
+                        closeButtonLabelKey: "general_cancel",
+                        submit: function (model) {
+                            $scope.model.submit($scope.model);
+                            overlayService.close();
+                        },
+                        close: function () {
+                            overlayService.close();
+                        }
+                    };
+                    overlayService.open(dialog);
+                    return;
                 }
+
+                $scope.model.submit($scope.model);
             }
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
index bf74431d96..bb0804e2bf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
@@ -92,16 +92,6 @@
 
                 </umb-box-content>
             </umb-box>
-
-            <div ng-if="vm.compositionRemoved" class="umb-editor-confirm">
-                <h5 class="red"><i class="icon-alert"></i>Warning</h5>
-                <p>Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?</p>
-                <label class="checkbox no-indent">
-                    <input type="checkbox" ng-model="vm.allowSubmit" />
-                    <strong>I know what I'm doing</strong>
-                </label>
-            </div>
-
         </umb-editor-container>
 
         <umb-editor-footer>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/overlays/confirmremove.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/overlays/confirmremove.html
new file mode 100644
index 0000000000..dd5e244ba5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/overlays/confirmremove.html
@@ -0,0 +1,6 @@
+<div>
+
+    <h5 class="red"><i class="icon-alert"></i>Warning</h5>
+    <p>Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?</p>
+
+</div>