模态布局在Angular中没有响应答案

【问题标题】：Modal Layout not Responsive in Angular模态布局在Angular中没有响应
【发布时间】：2021-08-04 15:25:20
【问题描述】：

我使用 angular7 和 bootstrap4 并使用 PSPDFKit 在查看器中打开 pdf 文件

查看器在模态中打开。

模态不响应的问题。

我还希望 pspdfkit 以所有大小的模式打开（模式大小的 100%）

这是html代码：

<style>
  #app {
  
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>





<div class="modal-dialog modal-800" >
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title pull-left">attachmnt</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div id="app">
      </div>
    </div>
    <div class="modal-footer">
      <button *ngIf="this.categAttachmnt !=null" type="button" class="btn btn-default"  (click)="saveFile()">حفظ التعديلات</button>
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">close</button>
      <button type="button" class="btn btn-default" (click)="getURLDowload()">download </button>
    </div>
  </div>
</div>

.css 代码

.modal{
  z-index:1000 !important;
}

.modal-backdrop{
  z-index:999 !important;
}

[dir='rtl'] .modal-title{
  color: rgb(255, 82, 82);
  //font-family: 'Roboto', sans-serif !important;
  margin-right: 20px !important;
  font-weight: bold;
}

.bsm-modal .bsm-modal-x-btn {
  top: 8px;
  margin: 0;
  z-index: 1;
  padding: 0;
  opacity: 1;
  right: 15px;
  cursor: pointer;
  line-height: 1;
  text-shadow: none;
  position: absolute;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  border: 0;
}


.modal-lg {
  max-width: 90%;
  height: 100%;
}
.modal-dialog .gray .modal-lg > .modal-content{
  height:100%
}
.modal-dialog > .modal-content {
  height: 720px;
  width: 100%;
}



.modal-dialog.modal-800 {
  width: 800px;
  margin: 30px auto;
}


.modal-footer button {
  width: 10%;
  margin: 1%;
  padding: 0.5% 1%;
}

打开模态的代码：

 openModalWithComponent() {
    const initialState = {
      list: [
        'Open a modal with component',
        'Pass your data',
        'Do something else',
        '...'
      ],
      title: 'Document Viewer'
    };
    this.bsModalRef = this.modalService.show(ModalComponent, Object.assign({ initialState }, { class: 'gray modal-lg' }));
    this.bsModalRef.content.closeBtnName = 'Close';
  }

【问题讨论】：

标签： css angular bootstrap-4 pspdfkit

【解决方案1】：

尝试在 ModalComponent 的 CSS 中使用断点

例子：

@media 仅屏幕和（最大宽度：640 像素）{}

@media 仅屏幕和（最小宽度：640 像素）{}

@media 仅屏幕和（最小宽度：768px）{}

@media 仅屏幕和（最小宽度：1200 像素）{}

【讨论】：

【解决方案2】：

您的模态框正在使用这种样式，这会阻止它减小它的宽度，因此也阻止它的内容宽度：

.modal-dialog.modal-800 {
  width: 800px;
  margin: 30px auto;
}

另外，请注意，在同一声明中设置的边距会强制 PSPDFKit 查看器内容占用容器宽度的 100%。

如有任何其他问题，请随时contact support at PSPDFKit，我们随时为您提供帮助:)

【讨论】：