Question

我正在使用Bootstrap小部件，并尝试创建全屏模式（页眉在顶部，页脚在底部，正文滚动在中间）。我可以使用此处概述的一些简单html轻松做到这一点：

https://www.codeply.com/go/DLPXHfEIiS/bootstrap-4-full-screen-modal

但是，一旦我变得越来越复杂并且想要调用自己的组件作为内容，它就不再起作用。该组件从模态内容向下嵌套了一层，我相信这是中断流程的原因。我正在尝试按照此处概述的说明进行操作：

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

即使在上面的示例中，您也可以对其进行检查并查看该组件是否嵌套在modal-content div中。

效果（当尝试使用上面第一个链接中的方法全屏显示时）是模态，模态对话框和模态竞争所有DO都变为全屏显示。但是，尽管我尝试将其嵌套以表现行为，但模态组件中的嵌套组件仍会调整大小。

我在这里想念什么明显的东西？在此先感谢您，星期五快乐。

::编辑以覆盖注释中的限制：

CSS

.gr-modal-full .modal-dialog {
  min-width: 100%;
  margin: 0;
}
.gr-modal-full .modal-content {
  min-height: 100vh;
}

.TS调用组件

  const journalPopup = this.modalService.open(
    JournalPopupComponent,
    {windowClass: 'gr-modal-full', backdrop: false});
  journalPopup.componentInstance.journal = this.journal;

组件

import {Component, Input, OnInit} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {HttpClient} from '@angular/common/http';

@Component( {
  selector: `
  <div class="modal-header"></div>
  <div class="modal-body"></div>
  <div class="modal-footer"></div>
`,
  templateUrl: './journal.popup.component.html',
  styleUrls: ['./journal.popup.component.scss']
})

export class JournalPopupComponent implements OnInit {
  @Input() journal: any;
  constructor(public modal: NgbActiveModal) {}
  ngOnInit(): void {
  }
}

Answer 1

扔掉上面的代码并改掉旧代码即可得到答案。我只是使用CSS并将组件设为绝对。只要我的页眉和页脚的高度不需要更改（我可以控制），就可以解决问题。

约翰·保罗·轩尼诗（John Paul Hennessy）和他的Codepen在此链接上为我提供了所需的支持：https://codepen.io/yewnork/pen/Kpaqeq

.gr-modal-full .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.gr-modal-full .modal-dialog {
  position: fixed;
  margin: 0;
  min-width: 100%;
  height: 100%;
  padding: 0;
}

.gr-modal-full .modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
}

.gr-modal-full .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  padding: 10px;
  border-radius: 0;
  //background: #6598d9;
}

.gr-modal-full .modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.gr-modal-full .modal-body {
  position: absolute;
  top: 81px;
  bottom: 61px;
  width: 100%;
  overflow: auto;
}

.gr-modal-full .modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  border-radius: 0;
  //background: #f1f3f5;
}

将内容作为组件传递时，无法使用NgbModal获得全屏模式

1 个答案: