使用Angular 7中的最大化/最小化图标调整引导模式对话框的大小
Posted
技术标签:
【中文标题】使用Angular 7中的最大化/最小化图标调整引导模式对话框的大小【英文标题】:Bootstrap modal-dialog resize with Maximize/Minimize icons in Angular 7 【发布时间】:2020-08-13 13:25:13 【问题描述】:我正在使用 Bootstrap Model-dialog 弹出窗口在我的 Angular 7 应用程序中显示我的内容。在多个地方使用它,我正在根据加载的内容更改弹出窗口的宽度和高度。
现在我需要添加 最小化/最大化 图标来弹出。用户可以通过单击最小/最大图标来调整弹出窗口的大小。是否有任何属性可以调整弹出窗口的宽度和高度。
this.showModelPopup.open().then((result) =>
, (reason) =>
);
在 html 中
<div class="modal-dialog">
<ng-template #content let-modal>
<div id="Status" data-grid="col-md-12">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" (click)="">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<div>
// My content here
</div>
</div>
</div>
</div>
</ng-template>
【问题讨论】:
【参考方案1】:您的 Angular html 模板将如下所示:
<div class="modal-dialog" id="my-modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<span class="fa fa-window-maximize cursor-pointer modal-resize" (click)="maximize();" *ngIf="!this.isMaximize" title="Maximize"></span>
<span class="fa fa-window-restore cursor-pointer modal-resize" (click)="restore()" *ngIf="this.isMaximize" title="Restore"></span>
Your header
</div>
<div class="modal-body" id="my-modal-body">
Your body
</div>
<div class="modal-footer">
Your footer
</div>
</form>
</div>
您各自的角度组件 .ts 类文件将具有以下内容:
isMaximize = false;
maximize()
this.isMaximize = !this.isMaximize;
document.getElementById('my-modal-dialog').style.maxWidth = "100%";
document.getElementById('my-modal-dialog').style.margin = "auto";
document.getElementById('my-modal-dialog').style.display = "inline";
document.getElementById('my-modal-body').style.maxHeight = "calc(100vh - 139px)";
restore()
this.isMaximize = !this.isMaximize;
document.getElementById('my-modal-dialog').style.maxWidth = "";
document.getElementById('my-modal-dialog').style.margin = "";
document.getElementById('my-modal-dialog').style.display = "block";
document.getElementById('my-modal-body').style.maxHeight = "calc(100vh - 190px)";
【讨论】:
以上是关于使用Angular 7中的最大化/最小化图标调整引导模式对话框的大小的主要内容,如果未能解决你的问题,请参考以下文章