better z-index logic for modals

lenadax · lenadax · commit dbb357f71f6b · 2025-02-24T11:08:04.000+01:00
diff --git a/src/overlay.js b/src/overlay.js
@@ -23,7 +23,8 @@ export class Overlay extends Events {
     }
 
     compile() {
-        const zIndex = $('body').hasClass('modal-open') ? 1056 : 1055; // apply z-index for up zo 2 levels
+        let zIndex = 1055; // default bootstrap modal z-index
+        zIndex += $('.modal:visible').length; // increase zindex based on currently open modals
         compile_template(this, `
             <div class="modal-wrapper position-absolute" t-elem="wrapper" style="z-index: ${zIndex}">
               <div class="modal-backdrop opacity-25" t-elem="backdrop"></div>
diff --git a/treibstoff/bundle/treibstoff.bundle.js b/treibstoff/bundle/treibstoff.bundle.js
@@ -607,7 +607,8 @@ var ts = (function (exports, $) {
             this.is_open = false;
         }
         compile() {
-            const zIndex = $('body').hasClass('modal-open') ? 1056 : 1055;
+            let zIndex = 1055;
+            zIndex += $('.modal:visible').length;
             compile_template(this, `
             <div class="modal-wrapper position-absolute" t-elem="wrapper" style="z-index: ${zIndex}">
               <div class="modal-backdrop opacity-25" t-elem="backdrop"></div>
diff --git a/treibstoff/bundle/treibstoff.bundle.min.js b/treibstoff/bundle/treibstoff.bundle.min.js

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,8 @@ export class Overlay extends Events {`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`compile() {`
`26`		`- const zIndex = $('body').hasClass('modal-open') ? 1056 : 1055; // apply z-index for up zo 2 levels`
	`26`	`+ let zIndex = 1055; // default bootstrap modal z-index`
	`27`	`+ zIndex += $('.modal:visible').length; // increase zindex based on currently open modals`
`27`	`28`	compile_template(this, `
`28`	`29`	`<div class="modal-wrapper position-absolute" t-elem="wrapper" style="z-index: ${zIndex}">`
`29`	`30`	`<div class="modal-backdrop opacity-25" t-elem="backdrop"></div>`