css - 使用 Angular 7 中的最大化/最小化图标引导模式对话框调整大小

Question

我正在使用 Bootstrap 模型对话框 弹出窗口在我的 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">&times;</span>
                </button>

                <button type="button" class="close"  (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>

                <div>
                   // My content here
                </div>
            </div>
        </div>
    </div>
</ng-template>

Answer 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>

并且您各自的 Angular 组件 .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)";
}