如何移除Angular 2弹窗中的背景控件？

Hey there! Let's get your Angular 2 modal sorted out, including removing that background overlay you mentioned. First, let's refactor your modal to follow Angular's best practices (since direct DOM manipulation with getElementById isn't ideal in Angular) and then tackle the background removal.

Step 1: Refactor the Modal to Use Angular's Data Binding #

Instead of relying on vanilla JS to toggle the modal, we'll use Angular's property binding to control its visibility. Here's how your component files should look:

Component Template (modal-example.component.html)

<button (click)="openModal()">Open Modal</button>

<!-- The Modal -->
<div class="modal" *ngIf="isModalOpen">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" (click)="closeModal()">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

Component Class (modal-example.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-modal-example',
  templateUrl: './modal-example.component.html',
  styleUrls: ['./modal-example.component.css']
})
export class ModalExampleComponent {
  isModalOpen = false;

  openModal(): void {
    this.isModalOpen = true;
  }

  closeModal(): void {
    this.isModalOpen = false;
  }
}

Step 2: Remove the Modal Background Overlay #

The "background control" you're referring to is almost certainly the semi-transparent overlay that comes with most default modal styles. There are two easy ways to get rid of it:

Option 1: Permanently Remove the Background via CSS

Open your component's CSS file and modify the .modal class to remove the background property:

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Delete or comment out this line to remove the background */
  /* background-color: rgba(0, 0, 0, 0.4); */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

Option 2: Dynamically Toggle the Background (If You Need It Sometimes)

If you want to show/hide the background conditionally, use Angular's [ngClass] directive:

Update your template:

<div class="modal" [ngClass]="{'no-background': !showModalBackground}" *ngIf="isModalOpen">

Add a new property to your component class:

showModalBackground = false; // Set to true if you want the background back later

Add this CSS class to hide the background:

.modal.no-background {
  background-color: transparent;
}

A Quick Note #

Avoid using vanilla JS DOM methods like getElementById in Angular—using data binding and component properties keeps your code more maintainable and aligned with Angular's component-based architecture.

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