bootstrap и модальное окно

Question

Встретился с очень необычным багом. У меня есть div блок с содержимым, под ним имеется сама кнопка вызывающая модальное окно и само модальное окно. При вызове ошибок нету

1 скрин: Сам блок с содержимым, в котором находиться модальное окно 2 скрин: Само модальное окно

Суть проблемы в том что в родительский блок я пытаюсь добавить фильтр:

backdrop-filter:blur(5px) brightness(45%);

Но при добавлении происходит вот такая тема в случаи вызове модального окна:

Пробовал многие популярные способы как можно блок вернуть на место но не один не помог (z-index, position: relative и так далее) есть ли варианты в моём случаи как это можно исправить?

Answer 1

Вам нужен не родительский элемент, а соседский блок с тенью.

Вот пример кода с вызовом модалки и тенью.

modal - это сама модалка, в ней есть shadow - это наша тень, которая растягивается на весь родитель и имеет z-index: 1;, а также position: absolution;.

Также есть modal_wrap - это блок с контентом, который имеет z-index: 2; чтобы отображаться над тенью.

$('.modal_wrap h2').click(function() {
  $('.modal--active').removeClass('modal--active') 
})

$('h1').click(function() {
  $('.modal').addClass('modal--active') 
})

.main {
  background-color: red;
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
}

h1 {
  cursor: pointer;
}

.modal {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  display: none;
}

.modal--active {
  display: flex;
}

.modal_wrap {
  margin: auto;
  display: flex;
  width: 200px;
  height: 200px;
  background-color: blue;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.modal_wrap h2 {
  cursor: pointer;
}

.shadow {
  position: absolute;  
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter:blur(5px) brightness(45%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <h1>Parent</h1>
  <div class="modal modal--active">
    <div class="modal_wrap">
      <h2>MODAL</h2>
    </div>
    <div class="shadow">
    </div>  
  </div>
</div>

БЛОГ НА HUSL

bootstrap и модальное окно

Ответы (1 шт):