Как добавить эффект размытия в ngx-bootstrap-modal

Я использую ngx-bootstrap в своем проекте.
modal.html

<ng-template #modalMainNotification>
    <div class = "modal-header">
        <h4 class = "modal-title pull-left">{{notificationModal.title}}</h4>
        <button type = "button" class = "close pull-right" aria-label = "Close" (click) = "modalRef.hide()">
            <span aria-hidden = "true">&times;</span>
        </button>
    </div>
    <div class = "modal-body">
        <div [innerHTML] = "notificationModal.content_plus | safeHtml"></div>
    </div>
</ng-template>

Он создает компонент в DOM
<bs-modal-backdrop class = "modal-backdrop fade in show"></bs-modal-backdrop>

<modal-container ....></modal-container>

Насколько я понимаю, я должен сделать filter:blur(2px) to modal-backdrop , но это не имеет никакого эффекта.

модальный.scss

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  filter: blur(4px); // no effect
  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

ОБНОВЛЕНИЕ 1:
В качестве примера вы можете посмотреть один из примеров на stackblitz - ссылка

css angular bootstrap-modal

11.12.2020 12:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 620

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Если вы хотите изменить стиль своего модального окна, обязательно добавьте encapsulation в свой компонент modal:

Например:

@Component({
  selector: "app-modal",
  templateUrl: "./modal.component.html",
  styleUrls: ["./modal.component.css"],
  encapsulation: ViewEncapsulation.None // add encaptulation
})

И он будет работать нормально.

Вы можете проверить здесь: https://stackblitz.com/edit/angular-ngx-bootstrap-modal-znbth2?file=src/app/app.component.ts

в любом случае нет правильного эффекта размытия на фоне

— 14.12.2020 06:50

11.12.2020 12:44

Если ожидается, что это будет глобально в приложении, я бы поместил стиль в корневой файл стиля style.scss в корневую папку, а не в стиль вашего компонента.

стиль.scss:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  filter: blur(4px); // no effect
  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

Я переместился в корневую папку, эффект размытия все равно не работает

— 14.12.2020 06:52

12.12.2020 10:36

Ответ принят как подходящий

Я решил эту проблему, добавив backdrop-filter: blur(10px); к modal-container, и это сработало для меня.

14.12.2020 06:56