如何实现全屏Modal弹窗？Angular NgbModal问题求助

Fixing Fullscreen NgBootstrap Modal Issues #

I've run into this exact problem with NgBootstrap modals before—those built-in size options (lg, xl) only go so far, and true fullscreen requires a bit of custom work. Let's break down the fixes step by step:

1. Correct Your TypeScript Code First #

First, there's a small syntax error in your current TS code: the open method is nested inside the constructor, which won't work. Let's fix that and add the custom class we need for fullscreen:

import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 

export class CustomHomeComponent { 
  constructor( private modalService: NgbModal ) { }

  open(content: any) { 
    this.modalService.open(content, {
      windowClass: 'fullscreen-modal', // Attach our custom style class here
      backdrop: 'static' // Optional: Prevent closing when clicking outside the modal
    }); 
  } 
}

2. Add Custom Fullscreen CSS #

The reason your previous CSS attempts failed is likely because NgBootstrap modals are rendered directly in the <body> tag, not inside your component's DOM—so component-scoped styles won't reach them by default. Add this CSS to your global styles.css/styles.scss file (or use ::ng-deep in your component styles if you prefer, though it's deprecated):

.fullscreen-modal .modal-dialog {
  max-width: 100vw; /* Take full viewport width */
  width: 100%;
  height: 100vh; /* Take full viewport height */
  margin: 0; /* Remove default margin */
}

.fullscreen-modal .modal-content {
  height: 100%; /* Make content fill the dialog */
  border-radius: 0; /* Remove rounded corners for true fullscreen */
}

3. Optional: Fill Modal Body with Content #

If you want the modal body to take up the remaining space (minus header and footer), add this extra CSS:

.fullscreen-modal .modal-body {
  height: calc(100% - 120px); /* Adjust based on your header/footer height */
  overflow-y: auto; /* Add scroll if content overflows */
}

Why This Works #

By using windowClass, we attach our custom class directly to the modal's root container, ensuring our styles target the correct elements. Placing the CSS in the global stylesheet bypasses Angular's view encapsulation, letting it apply to the modal (which lives outside your component's DOM tree).

内容的提问来源于stack exchange，提问作者Yaël