Angular驱动的引导模式的透明标题和背景

Question

我使用的是角功率引导模式。模态的内容是一个iframe，它是一个youtube视频播放器。我希望模态主体和标头的背景颜色是透明的，所以我看到的是背景。我只想看看关闭按钮和iframe。就是这样。

这是我的组件的html模板：

<div class="modal-header">
<button type="button" class="close modal-x-button pull-right" (click)="activeModal.dismiss()">
<svg class="action-icon" [svg]="'x-action.svg'" [height]="12"></svg>
</button>
</div>
<div class="modal-backdrop modal-body">
<iframe type="text/html" width="100%" height="400"
src="https://www.youtube.com/embed/something"
frameborder="0" [allowFullscreen]="activeModal"></iframe>
</div>

这就是CSS：

video-modal {
.modal-body {
padding:0px;
display: block;
}
.modal-header {
display: block;
}
}

这里有几个问题：

1. 有没有办法保持页眉上的关闭按钮，但使页眉的背景颜色透明(即与背景颜色相同(？

2. 我不喜欢将modal-backdrop类分配给模态主体。有没有一种方法可以让身体透明并采用背景颜色？

Answer 1

在模态的NgBootstrap文档中，可以将客户类传递给windowClass。

this.modalService.open(content, {
ariaLabelledBy: 'modal-basic-title', 
windowClass: 'youtube-modal-content'
}).result.then(
result => this.closeResult = `Closed with: ${result}`,
reason => this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
);

.youtube-modal-content .modal-content {
background: transparent !important;
border: 0 !important;
}
.youtube-modal-content .modal-header,
.youtube-modal-content .modal-body,
.youtube-modal-content .modal-footer {
border: 0 !important;
}

https://ng-bootstrap.github.io/#/components/modal/api

https://stackblitz.com/edit/angular-fnxfzn