如何在ngx-bootstrap-modal中添加模糊效果

Question

我在我的项目中使用 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) 改为 modal-backdrop ，但它没有任何效果。

modal.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; }
}

UPD 1:
作为示例，您可以查看 stackblitz 上的示例之一 - link

Answer 1

如果您想修改模态框的样式，请确保在 modal 组件中添加 encapsulation：

举个例子：

@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

Answer 2

如果这是应用程序中的全局样式，我会将样式放在根文件夹中的根样式文件 style.scss 中，而不是组件样式中。

style.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; }
}

Answer 3

我通过将 backdrop-filter: blur(10px); 添加到 modal-container 解决了这个问题，它对我有用

如何在ngx-bootstrap-modal中添加模糊效果

How to add blur effect in ngx-bootstrap-modal

css

bootstrap-modal

angular