Angular中打开Bootstrap Modal时页面冻结问题求助

问题分析 #

同时使用Bootstrap原生的data-bs-toggle/data-bs-target属性和Angular的(click)事件，容易引发事件冲突，导致Bootstrap的Modal遮罩层无法正确与Modal联动，出现页面冻结变灰的情况。另外版本不兼容、z-index层级问题也可能导致该现象。

解决方案 #

1. 改用Angular手动控制Modal实例

移除Bootstrap的原生触发属性，通过Angular代码直接管理Modal的显示/隐藏，避免事件冲突：

组件类代码：

import { Modal } from 'bootstrap';
import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class YourNewsComponent implements AfterViewInit {
  @ViewChild('newsModal') newsModal!: ElementRef;
  selectedItem: any;
  private modalInstance: Modal | null = null;

  ngAfterViewInit(): void {
    // 初始化Modal实例
    this.modalInstance = new Modal(this.newsModal.nativeElement);
  }

  openModal(item: any): void {
    this.selectedItem = item;
    this.modalInstance?.show();
  }

  closeModal(): void {
    this.modalInstance?.hide();
  }
}

模板代码修改：

<div class="row">
    <div class="col-lg-6" *ngFor="let newsItem of filteredNews">
        <div class="box">
            <div class="card mb-3" (click)="openModal(newsItem)" role="button">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- News Modal -->
<div #newsModal class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5>
                <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;">
                <p>{{ selectedItem?.summary }}</p>
            </div>
        </div>
    </div>
</div>

2. 检查版本兼容性

确保使用的Bootstrap版本（建议Bootstrap 5.x）与Angular版本（Angular 12+）兼容，避免因版本差异导致的JS运行异常。

3. 调整z-index层级（可选）

若页面仍出现遮罩层覆盖Modal的情况，添加自定义CSS调整层级：

.modal {
    z-index: 1055 !important;
}
.modal-backdrop {
    z-index: 1050 !important;
}

4. 确保Modal唯一标识

确认页面中仅存在一个绑定#newsModal的Modal元素，避免Bootstrap无法定位正确的Modal实例。

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