user settings: Fix active background links when a modal is visible.

A bug caused background links to open even when a modal in the user
settings overlay was active in the foreground. This commit fixes this
by disabling mouse events for the background when the modal is active,
and restoring them as soon as the modal starts closing.

Fixes #10654.

static/js/click_handlers.js

@@ -723,6 +723,12 @@ exports.initialize = function () {
             popovers.hide_all();
         }
 
+        // If user clicks outside an active modal
+        if ($('.modal.in').has(e.target).length === 0) {
+            // Enable mouse events for the background as the modal closes
+            $('.overlay.show').attr("style", null);
+        }
+
         if (compose_state.composing()) {
             if ($(e.target).closest("a").length > 0) {
                 // Refocus compose message text box if link is clicked

static/js/overlays.js

@@ -102,6 +102,8 @@ exports.open_modal = function (name) {
     blueslip.debug('open modal: ' + name);
 
     $("#" + name).modal("show").attr("aria-hidden", false);
+    // Disable background mouse events when modal is active
+    $('.overlay.show').attr("style", "pointer-events: none");
     // Remove previous alert messsages from modal, if exists.
     $("#" + name).find(".alert").hide();
 };
@@ -163,6 +165,9 @@ exports.close_modal = function (name) {
     blueslip.debug('close modal: ' + name);
 
     $("#" + name).modal("hide").attr("aria-hidden", true);
+    // Enable mouse events for the background as the modal closes.
+    $('.overlay.show').attr("style", null);
+
 };
 
 exports.close_active_modal = function () {

static/js/settings_account.js

@@ -309,6 +309,12 @@ exports.set_up = function () {
         clear_password_change();
     });
 
+    // If the modal is closed using the 'close' button or the 'Cancel' button
+    $('.modal').find('[data-dismiss=modal]').on('click', function () {
+        // Enable mouse events for the background on closing modal
+        $('.overlay.show').attr("style", null);
+    });
+
     $('#change_password_button').on('click', function (e) {
         e.preventDefault();
         e.stopPropagation();

static/styles/settings.scss

@@ -1479,6 +1479,7 @@ body:not(.night-mode) #account-settings .custom_user_field .datepicker {
 
 .modal.fade.in {
     top: 50%;
+    pointer-events: all;
 }
 
 #id_realm_create_stream_permission,