Angular中Dialog弹窗异常：出现两个弹窗如何解决？

Hey there, let's figure out why you're seeing two dialogs (one centered, one red at the bottom) when using Angular Material Dialog. Since you mentioned you're using the official example code and only customized CSS, the culprit is almost certainly a style conflict or accidental duplicate dialog trigger—let's break down how to fix this:

1. First, Rule Out CSS Conflicts #

Since you modified styles, this is the most likely cause. Here's how to debug:

• Temporarily remove all your custom Dialog CSS: If the red bottom dialog disappears, you know your styles are causing the issue.
• Inspect the red dialog with browser dev tools: Right-click the bottom red dialog > Inspect. Check its class names and applied styles—look for any of your custom CSS rules (like position: fixed, bottom: 0, or red background) that are accidentally targeting Material Dialog elements.
• Use specific selectors for custom styles: Instead of targeting generic classes like .mat-dialog-container globally, use a custom panelClass to scope your styles. For example:
  • In your component when opening the dialog:

    this.dialog.open(YourDialogComponent, {
      panelClass: 'custom-centered-dialog' // Add a unique class
    });
    

  • Then in your CSS:

    .custom-centered-dialog .mat-dialog-container {
      /* Your custom styles here—only applies to this dialog */
    }
    

  This prevents your styles from leaking to unintended elements.

2. Check for Duplicate Dialog Triggers #

If CSS isn't the issue, verify you're not opening the dialog twice:

• Search your component code: Look for all instances of dialog.open()—make sure you're not calling it in multiple places (like ngOnInit and a button click, or in an Observable that emits multiple times).
• Check your template: Ensure your trigger button doesn't have duplicate (click) bindings, and that the button itself isn't rendered twice (e.g., inside an *ngFor that loops unexpectedly).

3. Verify Dialog Component Structure #

Double-check your custom Dialog component's template:

• Make sure you're not nesting another dialog component or accidental fixed-position elements inside it that might look like a second dialog.
• Ensure your template only contains the content you want inside the centered dialog—no extra divs with position: fixed or bottom-aligned styles.

Once you work through these steps, the red bottom dialog should disappear, leaving only your properly styled centered Material Dialog.

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