Angular 7中为Bootstrap Modal-dialog添加最大化/最小化图标并调整尺寸

Absolutely! While Bootstrap's Modal doesn’t come with built-in minimize/maximize features out of the box, we can easily add this functionality with a bit of Angular logic and custom CSS—plus we’ll keep the dynamic width/height control you need. Here’s a step-by-step solution tailored to your Angular 7 app:

Step 1: Update Your Modal HTML Structure #

First, let’s restructure your modal to include a header for the minimize/maximize controls, and add dynamic style bindings to the modal-dialog element:

<ng-template #content let-modal>
  <div class="modal-dialog" [ngStyle]="getModalStyles()">
    <div class="modal-content">
      <!-- Modal Header with Control Buttons -->
      <div class="modal-header">
        <h5 class="modal-title">Your Modal Title</h5>
        <!-- Minimize Button -->
        <button type="button" class="btn btn-sm" (click)="toggleMinimize()">
          <span aria-hidden="true">−</span>
        </button>
        <!-- Maximize/Restore Button -->
        <button type="button" class="btn btn-sm" (click)="toggleMaximize()">
          <span aria-hidden="true">{{ isMaximized ? '↔' : '☐' }}</span>
        </button>
        <!-- Close Button -->
        <button type="button" class="close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" [class.modal-body-minimized]="isMinimized">
        <!-- Your Content Here -->
        <div>My content here</div>
      </div>
    </div>
  </div>
</ng-template>

Step 2: Add Angular Component Logic #

In your component’s TypeScript file, add state variables and methods to handle resizing, plus dynamic width/height control:

import { Component, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('content') content: any;
  isMaximized = false;
  isMinimized = false;
  // Default dimensions - adjust these or set them dynamically before opening the modal
  defaultWidth = 600;
  defaultHeight = 400;
  currentWidth: number;
  currentHeight: number;

  constructor(private modalService: NgbModal) {
    this.currentWidth = this.defaultWidth;
    this.currentHeight = this.defaultHeight;
  }

  openModal() {
    this.modalService.open(this.content, { centered: true, scrollable: true }).then((result) => {
      // Reset state when modal closes
      this.resetModalState();
    }, (reason) => {
      // Reset state when modal is dismissed
      this.resetModalState();
    });
  }

  toggleMaximize() {
    this.isMaximized = !this.isMaximized;
    if (this.isMaximized) {
      // Expand to near-full viewport size (with padding)
      this.currentWidth = window.innerWidth - 40;
      this.currentHeight = window.innerHeight - 80;
    } else {
      // Restore default dimensions
      this.currentWidth = this.defaultWidth;
      this.currentHeight = this.defaultHeight;
    }
    // If minimized, restore body visibility when maximizing
    if (this.isMinimized) this.isMinimized = false;
  }

  toggleMinimize() {
    this.isMinimized = !this.isMinimized;
    if (this.isMinimized) {
      // Collapse to just the header height
      this.currentHeight = 60;
    } else {
      // Restore height (use maximized size if active, else default)
      this.currentHeight = this.isMaximized ? window.innerHeight - 80 : this.defaultHeight;
    }
  }

  getModalStyles() {
    return {
      'width': `${this.currentWidth}px`,
      'max-width': this.isMaximized ? 'none' : '100%', // Override Bootstrap's max-width when maximizing
      'height': `${this.currentHeight}px`,
      'transition': 'all 0.3s ease' // Smooth resize animation
    };
  }

  private resetModalState() {
    this.isMaximized = false;
    this.isMinimized = false;
    this.currentWidth = this.defaultWidth;
    this.currentHeight = this.defaultHeight;
  }
}

Step 3: Add Custom CSS #

Add these styles to your component’s CSS file to polish the minimized state and button spacing:

.modal-body-minimized {
  display: none; /* Hide body content when minimized */
}

.modal-header .btn-sm {
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border: none;
  background: transparent;
  cursor: pointer;
}

.modal-header .btn-sm:hover {
  background-color: #f8f9fa;
}

Key Details for Your Use Case #

• Dynamic Width/Height: You can adjust defaultWidth and defaultHeight before calling openModal() to set custom dimensions for different instances of the modal.
• Bootstrap Modal Integration: We use ng-bootstrap’s NgbModal (which matches your existing modal.dismiss code) and override Bootstrap’s default max-width only when the modal is maximized.
• State Persistence: The modal resets to default dimensions when closed, so each new open starts fresh.

内容的提问来源于stack exchange，提问作者user2038538