Question

我有一个Angular 6应用，我正在尝试实现从屏幕右侧滑入的模式窗口，如下所示：https://codepen.io/anon/pen/OayRVy

但是，无论我如何尝试，都无法覆盖模式窗口的位置。我唯一能够更改的是标题/正文的背景颜色。

我的模式HTML：

<ng-template #content let-modal="close">

      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Table of Contents</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"><span aria-hidden="true">&times;</span></button>
      </div>

      <div class="modal-body">
        <p>
          ....
        </p>
      </div>

</ng-template>

组件代码：

  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

  constructor(private modalService: NgbModal) {}

  public open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) => {
      ...
    }, (reason) => {
      ...
    });
  }

如果我检查HTML，然后在Chrome DevTools中将float: right属性添加到.modal-dialog容器中，它将完成我想要的操作。但是，添加

.modal-dialog {
  float: right;
}

对于我的.scss文件，该组件无效。

任何人都可以告诉我如何覆盖默认的引导程序样式，以便我可以强制其显示在屏幕的右侧并占据其高度的100％吗？

Answer 1

使用windowClass中的NgbModalOptions

    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg', windowClass: 'custom-class'}).result.then((result) => {

和在scss中：

.custom-class {
    float: right;
}

Answer 2

我曾尝试使用window.class: 'custom-class'属性，但是它不起作用。我将添加自定义类声明，并且模态将看起来完全相同。

解决方案来自https://ng-bootstrap.github.io/#/components/modal/examples 这是我最初为我的模态建模之后的模型。

他们在这里编写了一段关键代码，但没有解释为什么我自己还是不确定encapsulation: ViewEncapsulation.None的原因

将该行与自定义类一起添加到我的@Component声明中后，所有样式均起作用。

Answer 3

添加encapsulation: ViewEncapsulation.None解决方案的问题破坏了组件的所有样式。我从角度文档中找到了另一个解决方案：：https://valor-software.com/ngx-bootstrap/#/modals#service-custom-css-class 通过“开放模式”方法，您可以添加自己的类，然后可以访问该类并对模型进行建模。例如：

modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModalWithClass(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'pupUp-image-modal'})
    );
  }

Css：

.pupUp-image-modal {
    width: fit-content !important;
    max-width: 95% !important;
    max-height: 95%;
}

请注意，模型样式必须放置在主样式文件（style.css）中因为模型不是当前组件的一部分

Answer 4

如果您只需要修改模式中的现有类（例如.modal-content），则可以执行以下操作：

::ng-deep .modal-content  {
  background-color: yellow;
}

如果您想使用自己的CSS类，这是一个更复杂的示例：

::ng-deep .my-class {
  font-size: 2rem;
  .modal-dialog { 
    background-color: yellow;
    padding:1rem;
  }  
  .modal-content {
    color: white;
  }
  .modal-header {
    background-color: red;
  }
  .modal-body {
    background-color: green;
  }
}

并在* .ts文件中：

this.modalService.open(content, { windowClass: 'my-class'})

请注意，如果您正在处理大型应用程序，则不要使用::ng-deep，因为它将使CSS规则成为全局规则（也就是deprecated）。您可以将.my-class放在styles.scss或每个开发人员都知道“这里的所有规则都是全局的”的地方。这样，您还可以为其他模态使用.my-class-2。

NgbModal-自定义类样式

4 个答案: