模态布局在 Angular 中没有响应

如何解决模态布局在 Angular 中没有响应

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

查看器在模态中打开。

模态没有响应的问题。

我还希望 pspdfkit 在所有大小的模态中打开（模态大小的 100%）

<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';
  }

解决方法

尝试在 ModalComponent 的 CSS 中使用断点

示例：

@media only screen and (max-width: 640px) {}

@media only screen and (min-width: 640px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 1200px) {}

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

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

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

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