diff --git a/apps/docs/src/docs/components/modal.md b/apps/docs/src/docs/components/modal.md
index e65f8b5e1..9f19cb3b9 100644
--- a/apps/docs/src/docs/components/modal.md
+++ b/apps/docs/src/docs/components/modal.md
@@ -174,6 +174,10 @@ Feel free to mix vertically `centered` with `scrollable`.
   </BModal>
   <BModal v-model="nestedModal3" size="sm" title="Third Modal" ok-only>
     <p class="my-1">Third Modal</p>
+    <BButton @click="nestedModal4 = !nestedModal4" size="sm">Open Fouth Modal</BButton>
+  </BModal>
+  <BModal v-model="nestedModal4" size="sm" title="Fourth Modal" ok-only>
+    <p class="my-1">Fourth Modal</p>
   </BModal>
   <template #html>
 
@@ -193,6 +197,10 @@ Feel free to mix vertically `centered` with `scrollable`.
 
   <BModal v-model="nestedModal3" size="sm" title="Third Modal" ok-only>
     <p class="my-1">Third Modal</p>
+    <BButton @click="nestedModal4 = !nestedModal4" size="sm">Open Fouth Modal</BButton>
+  </BModal>
+  <BModal v-model="nestedModal4" size="sm" title="Fourth Modal" ok-only>
+    <p class="my-1">Fourth Modal</p>
   </BModal>
 </template>
 
@@ -200,7 +208,27 @@ Feel free to mix vertically `centered` with `scrollable`.
 const nestedModal1 = ref(false)
 const nestedModal2 = ref(false)
 const nestedModal3 = ref(false)
+const nestedModal4 = ref(false)
 </script>
+<style>
+/* just a little example of the variables and classes for stack */
+.modal {
+  --bs-modal-zindex: 1900;
+  transform: translate(
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
+  );
+  transition:
+    transform 0.5s,
+    opacity 0.15s linear !important;
+}
+.modal:not(.stack-inverse-position-0) {
+  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
+}
+.modal-backdrop:not(.stack-inverse-position-0) {
+  opacity: 0 !important;
+}
+</style>
 ```
 
   </template>
@@ -240,4 +268,22 @@ const preventFn = (e: Event) => {
 const nestedModal1 = ref(false)
 const nestedModal2 = ref(false)
 const nestedModal3 = ref(false)
+const nestedModal4 = ref(false)
 </script>
+
+<style>
+.modal {
+  --bs-modal-zindex: 1900;
+  transform: translate(
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
+    calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
+  );
+  transition: transform 0.5s, opacity 0.15s linear !important;
+}
+.modal:not(.stack-inverse-position-0) {
+  opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
+}
+.modal-backdrop:not(.stack-inverse-position-0) {
+  opacity: 0 !important;
+}
+</style>
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index e542377d9..fda0c3c7b 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -15,6 +15,7 @@
           {
             fade: !computedNoAnimation,
             show: isVisible,
+            ...sharedClasses,
           },
         ]"
         role="dialog"
@@ -24,7 +25,7 @@
         v-bind="$attrs"
         :style="computedZIndex"
         style="display: block"
-        @mousedown.self="hide('backdrop')"
+        @mousedown.left.self="hide('backdrop')"
       >
         <div class="modal-dialog" :class="modalDialogClasses">
           <div v-if="contentShowing" class="modal-content" :class="props.contentClass">
@@ -116,6 +117,7 @@
           :class="{
             fade: !computedNoAnimation,
             show: backdropVisible || computedNoAnimation,
+            ...sharedClasses,
           }"
           @click="hide('backdrop')"
         />
@@ -127,7 +129,16 @@
 <script setup lang="ts">
 import {onKeyStroke, unrefElement} from '@vueuse/core'
 import {useActivatedFocusTrap} from '../../composables/useActivatedFocusTrap'
-import {computed, type CSSProperties, type EmitFn, useTemplateRef, watch} from 'vue'
+import {
+  computed,
+  type CSSProperties,
+  type EmitFn,
+  nextTick,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import type {BModalProps} from '../../types/ComponentProps'
 import type {BModalEmits} from '../../types/ComponentEmits'
 import type {BModalSlots, BModalSlotsData} from '../../types/ComponentSlots'
@@ -137,7 +148,7 @@ import BCloseButton from '../BButton/BCloseButton.vue'
 import {useDefaults} from '../../composables/useDefaults'
 import {useId} from '../../composables/useId'
 import {useSafeScrollLock} from '../../composables/useSafeScrollLock'
-import {isEmptySlot} from '../../utils/dom'
+import {getModalZIndex, isEmptySlot} from '../../utils/dom'
 import {useColorVariantClasses} from '../../composables/useColorVariantClasses'
 import {useModalManager} from '../../composables/useModalManager'
 import {useShowHide} from '../../composables/useShowHide'
@@ -362,6 +373,7 @@ const titleClasses = computed(() => [
     ['visually-hidden']: props.titleVisuallyHidden,
   },
 ])
+
 const disableCancel = computed(() => props.cancelDisabled || props.busy)
 const disableOk = computed(() => props.okDisabled || props.busy)
 
@@ -370,12 +382,33 @@ const {activePosition, activeModalCount, stackWithoutSelf} = useModalManager(
   modelValue.value
 )
 
+const sharedClasses = computed(() => ({
+  [`stack-position-${activePosition?.value ?? 0}`]: true,
+  [`stack-inverse-position-${(activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0)}`]:
+    true,
+}))
+
 watch(stackWithoutSelf, (newValue, oldValue) => {
   if (newValue.length > oldValue.length && showRef.value === true && props.noStacking === true)
     hide()
 })
 
-const defaultModalDialogZIndex = 1056
+const defaultModalDialogZIndex = ref(getModalZIndex(element.value ?? document.body))
+
+onMounted(() => {
+  watch(
+    renderRef,
+    (v) => {
+      if (!v) return
+      nextTick(() => {
+        if (!element.value) return
+        defaultModalDialogZIndex.value = getModalZIndex(element.value)
+      })
+    },
+    {immediate: true}
+  )
+})
+
 const computedZIndexNumber = computed<number>(() =>
   // Make sure that newly opened modals have a higher z-index than currently active ones.
   // All active modals have a z-index of ('defaultZIndex' - 'stackSize' - 'positionInStack').
@@ -384,15 +417,21 @@ const computedZIndexNumber = computed<number>(() =>
 
   showRef.value || isLeaving.value
     ? // Just for reference there is a single frame in which the modal is not active but still has a higher z-index than the active ones due to _when_ it calculates its position. It's a small visual effect
-      defaultModalDialogZIndex -
+      defaultModalDialogZIndex.value -
       ((activeModalCount?.value ?? 0) * 2 - (activePosition?.value ?? 0) * 2)
-    : defaultModalDialogZIndex
+    : defaultModalDialogZIndex.value
 )
 const computedZIndex = computed<CSSProperties>(() => ({
   'z-index': computedZIndexNumber.value,
+  '--b-position': activePosition?.value ?? 0,
+  '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0),
+  '--b-count': activeModalCount?.value ?? 0,
 }))
 const computedZIndexBackdrop = computed<CSSProperties>(() => ({
   'z-index': computedZIndexNumber.value - 1,
+  '--b-position': activePosition?.value ?? 0,
+  '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0),
+  '--b-count': activeModalCount?.value ?? 0,
 }))
 
 const sharedSlots = computed<BModalSlotsData>(() => ({
diff --git a/packages/bootstrap-vue-next/src/styles/styles.scss b/packages/bootstrap-vue-next/src/styles/styles.scss
index abd5aea52..2132ee8ec 100644
--- a/packages/bootstrap-vue-next/src/styles/styles.scss
+++ b/packages/bootstrap-vue-next/src/styles/styles.scss
@@ -68,3 +68,8 @@
 .no-transition {
   transition: none !important;
 }
+
+:root {
+  --bs-modal-zindex: #{$zindex-modal};
+  --bs-toast-max-width: #{$toast-max-width};
+}
diff --git a/packages/bootstrap-vue-next/src/utils/dom.ts b/packages/bootstrap-vue-next/src/utils/dom.ts
index 578dd4897..6fc88f91d 100644
--- a/packages/bootstrap-vue-next/src/utils/dom.ts
+++ b/packages/bootstrap-vue-next/src/utils/dom.ts
@@ -66,3 +66,11 @@ export const sortSlotElementsByPosition = (
   if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
   return 0
 }
+
+export const getModalZIndex = (element?: Readonly<HTMLElement | null>): number => {
+  if (typeof window === 'undefined') return 1055
+  const target = element ?? document.body
+  const raw = window.getComputedStyle(target).getPropertyValue('--bs-modal-zindex').trim()
+  const parsed = Number.parseInt(raw, 10)
+  return Number.isFinite(parsed) ? parsed : 1055
+}