[IMP] web: make backdrops appear on top of older modals

When opening a modal on top of another, we expect the associated
modal-backdrop to be over this another modal (so that it is grayed).
This was not the case as bootstrap forces the modal-backdrop z-index
to a lower value than the modal's one (see fix comments in the changes
below).

1 files changed, 19 insertions, 0 deletions

diff --git a/addons/web/static/src/less/modal.less b/addons/web/static/src/less/modal.less
index 2a0fbb1fa36..025a5f3c91e 100644
--- a/addons/web/static/src/less/modal.less
+++ b/addons/web/static/src/less/modal.less
@@ -74,3 +74,22 @@
         }
     }
 }
+
+.modal-backdrop {
+    // Change the z-index of the modal-backdrop element to be equal to the
+    // modal element's one. Bootstrap does not support multi-modals, and without
+    // this rule all the modal-backdrops are below all the opened modals.
+    // Indeed, bootstrap forces them to a lower z-index as the modal-backdrop
+    // element (unique in their supported cases) might be put after the modal
+    // element (if the modal is already in the DOM, hidden, then opened). This
+    // cannot happen in odoo though as modals are not hidden but removed from
+    // the DOM and are always put at the end of the body when opened.
+    //
+    // Note that changing the @zindex-modal-background variable would have had
+    // the same effect but bootstrap removed it in their newest version, so this
+    // will be the proper fix. Note that they removed it to fix an issue with
+    // the "close on click on the backdrop" feature, so that is ok as we do not
+    // use this feature.
+    // (https://github.com/twbs/bootstrap/commit/4bbe80658a9d32df131e5fb13bc20688b99a70d5)
+    z-index: @zindex-modal;
+}