diff --git a/client/components/dates_popup/dates_popup.js b/client/components/dates_popup/dates_popup.js
index bfd7c3e..8adec02 100644
--- a/client/components/dates_popup/dates_popup.js
+++ b/client/components/dates_popup/dates_popup.js
@@ -51,10 +51,18 @@ class DatesPopup extends HTMLElement{
 
     hide(){
         this.style.visibility = "hidden";
+        window.removeEventListener("click", this.backgroundClickCallback);
+    }
+
+    backgroundClickCallback = ({target}) => {
+        if(target.id == "dates-popup"){
+            this.hide();
+        }
     }
 
     show(){
         this.setMaxInputDate();
+        window.addEventListener("click", this.backgroundClickCallback);
         this.style.visibility = "visible";
     }
 
diff --git a/client/components/export_popup/export_popup.js b/client/components/export_popup/export_popup.js
index b7b1dbb..bdfb1af 100644
--- a/client/components/export_popup/export_popup.js
+++ b/client/components/export_popup/export_popup.js
@@ -131,11 +131,19 @@ class ExportPopup extends HTMLElement{
 
     hide(){
         this.style.visibility = "hidden";
+        window.removeEventListener("click", this.backgroundClickCallback);
+    }
+
+    backgroundClickCallback = ({target}) => {
+        if(target.id == "export-popup"){
+            this.hide();
+        }
     }
 
     show(variables, startTime, endTime){
         this.style.visibility = "visible";
         this.updateValuesOnOpen(variables, startTime, endTime);
+        window.addEventListener("click", this.backgroundClickCallback);
     }
 
     connectedCallback(){