diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
index 531637d1..598aa19c 100644
--- a/app/assets/javascripts/polaris_view_components.js
+++ b/app/assets/javascripts/polaris_view_components.js
@@ -833,7 +833,8 @@ class Modal extends Controller {
   }
   open() {
     this.element.classList.remove(this.hiddenClass);
-    this.element.insertAdjacentHTML("afterend", `<div class="${this.backdropClass}"></div>`);
+    const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`;
+    this.element.insertAdjacentHTML("afterend", dropElement);
     this.backdrop = this.element.nextElementSibling;
   }
   close() {
@@ -878,6 +879,9 @@ class Polaris extends Controller {
   openModal() {
     this.findElement("modal").open();
   }
+  closeModal() {
+    this.findElement("modal").close();
+  }
   disableButton() {
     this.findElement("button").disable();
   }
diff --git a/app/assets/javascripts/polaris_view_components/modal_controller.js b/app/assets/javascripts/polaris_view_components/modal_controller.js
index 84f999f4..2664f02c 100644
--- a/app/assets/javascripts/polaris_view_components/modal_controller.js
+++ b/app/assets/javascripts/polaris_view_components/modal_controller.js
@@ -14,7 +14,8 @@ export default class extends Controller {
 
   open() {
     this.element.classList.remove(this.hiddenClass)
-    this.element.insertAdjacentHTML('afterend', `<div class="${this.backdropClass}"></div>`)
+    const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`
+    this.element.insertAdjacentHTML('afterend', dropElement)
     this.backdrop = this.element.nextElementSibling
   }
 
diff --git a/app/assets/javascripts/polaris_view_components/polaris_controller.js b/app/assets/javascripts/polaris_view_components/polaris_controller.js
index c3c56fbb..1d5670d7 100644
--- a/app/assets/javascripts/polaris_view_components/polaris_controller.js
+++ b/app/assets/javascripts/polaris_view_components/polaris_controller.js
@@ -5,6 +5,10 @@ export default class extends Controller {
     this.findElement("modal").open()
   }
 
+  closeModal() {
+    this.findElement("modal").close()
+  }
+
   disableButton() {
     this.findElement("button").disable()
   }