diff --git a/IDE/frontend-dev/scss/_popup.scss b/IDE/frontend-dev/scss/_popup.scss
index 417b216ae..4bcec16f0 100644
--- a/IDE/frontend-dev/scss/_popup.scss
+++ b/IDE/frontend-dev/scss/_popup.scss
@@ -165,5 +165,8 @@
   &.active-popup{
     @include active();
     background: rgba(0, 0, 0, 0.3);
+    &.no {
+      background: rgba(255, 0, 0, 0.3);
+    }
   }
 }
diff --git a/IDE/frontend-dev/src/popup.js b/IDE/frontend-dev/src/popup.js
index 6836f9f6f..e746d4820 100644
--- a/IDE/frontend-dev/src/popup.js
+++ b/IDE/frontend-dev/src/popup.js
@@ -16,6 +16,7 @@ function callFunc(func, arg)
 }
 
 const overlayActiveClass = 'active-popup';
+const errorClass = 'no';
 var popup = {
 	defaultStrings: {
 		cancel: json.popups.generic.cancel,
@@ -28,6 +29,7 @@ var popup = {
 			'input[type=text]',
 		],
 		titleClass: '',
+		error: false,
 	},
 	isShown(){
 		return parent.hasClass('active');
@@ -120,6 +122,10 @@ var popup = {
 			}
 		}
 		titleEl.addClass(opts.titleClass);
+		if(opts.error)
+			overlay.addClass(errorClass);
+		else
+			overlay.removeClass(errorClass);
 	},
 
 	respondToEvent(callback, e) {
diff --git a/IDE/public/css/style.css b/IDE/public/css/style.css
index 9a31de3fa..f9c0de4c1 100644
--- a/IDE/public/css/style.css
+++ b/IDE/public/css/style.css
@@ -1315,6 +1315,8 @@ ul dl {
   width: 100vw;
   z-index: 9998;
   background: rgba(0, 0, 0, 0.3); }
+  #overlay.active-popup.no {
+    background: rgba(255, 0, 0, 0.3); }
 
 ::-webkit-scrollbar {
   width: 12px; }
diff --git a/IDE/public/js/bundle.js b/IDE/public/js/bundle.js
index 4b27f2d15..93d7c0172 100644
--- a/IDE/public/js/bundle.js
+++ b/IDE/public/js/bundle.js
@@ -6298,6 +6298,7 @@ function callFunc(func, arg) {
 }
 
 var overlayActiveClass = 'active-popup';
+var errorClass = 'no';
 var popup = {
 	defaultStrings: {
 		cancel: json.popups.generic.cancel,
@@ -6306,7 +6307,8 @@ var popup = {
 	defaultOpts: {
 		focus: [// in reverse order of priority
 		'button[type=submit]', '.cancel', 'input[type=text]'],
-		titleClass: ''
+		titleClass: '',
+		error: false
 	},
 	isShown: function isShown() {
 		return parent.hasClass('active');
@@ -6501,6 +6503,7 @@ var popup = {
 		}
 
 		titleEl.addClass(opts.titleClass);
+		if (opts.error) _overlay.addClass(errorClass);else _overlay.removeClass(errorClass);
 	},
 	respondToEvent: function respondToEvent(callback, e) {
 		e.preventDefault();