时间戳

首页 > 解决方案 > 如何在 ngx-bootstrap-modal 中添加模糊效果

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

问题描述

我在我的项目中使用 ngx-bootstrap。
模态的.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但它没有效果。

模态的.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 上的示例之一 -链接

标签： cssangularbootstrap-modal

解决方案

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

推荐阅读