Прозрачный заголовок и фон для модального загрузчика Angular.

Question

Я использую угловой мод с начальной загрузкой. Содержимое модального листа - iframe, которое представляет собой видеоплеер YouTube. Я хочу, чтобы модальные цвета тела и фона заголовка были прозрачными, поэтому вместо них я вижу фон. Я просто хочу увидеть кнопку закрытия и фрейм. Вот и все.

Это 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 /# / компоненты / модальные / API

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