diff --git a/app/assets/javascripts/discourse/views/modal.js.es6 b/app/assets/javascripts/discourse/views/modal.js.es6
index 204a17e8c..4173da35d 100644
--- a/app/assets/javascripts/discourse/views/modal.js.es6
+++ b/app/assets/javascripts/discourse/views/modal.js.es6
@@ -1,5 +1,14 @@
 export default Ember.View.extend({
   elementId: 'discourse-modal',
   templateName: 'modal/modal',
-  classNameBindings: [':modal', ':hidden', 'controller.modalClass']
+  classNameBindings: [':modal', ':hidden', 'controller.modalClass'],
+
+  click: function(e) {
+    // Delegate click to modal backdrop if clicked outside. We do this
+    // because some CSS of ours seems to cover the backdrop and makes it
+    // unclickable.
+    if ($(e.target).closest('.modal-inner-container').length === 0) {
+      $('.modal-backdrop').click();
+    }
+  }
 });
diff --git a/test/javascripts/integration/modal-test.js.es6 b/test/javascripts/integration/modal-test.js.es6
new file mode 100644
index 000000000..0a7fc9288
--- /dev/null
+++ b/test/javascripts/integration/modal-test.js.es6
@@ -0,0 +1,29 @@
+integration("Modal");
+
+test("modal", function() {
+  visit('/');
+
+  andThen(function() {
+    ok(find('#discourse-modal:visible').length === 0, 'there is no modal at first');
+  });
+
+  click('.login-button');
+  andThen(function() {
+    ok(find('#discourse-modal:visible').length === 1, 'modal should appear');
+  });
+
+  click('.modal-outer-container');
+  andThen(function() {
+    ok(find('#discourse-modal:visible').length === 0, 'modal should disappear when you click outside');
+  });
+
+  click('.login-button');
+  andThen(function() {
+    ok(find('#discourse-modal:visible').length === 1, 'modal should appear');
+  });
+
+  keyEvent('#main-outlet', 'keyup', 27);
+  andThen(function() {
+    ok(find('#discourse-modal:visible').length === 0, 'ESC should close the modal');
+  });
+});