Bootstrap Modal打开后无法获取焦点、无法交互的问题求助

问题分析 #

你遇到的核心问题是：每次点击按钮打开Modal时都会创建新的Modal实例，导致多个backdrop（灰色遮罩层）叠加，遮罩层覆盖了模态框本身，从而无法对Modal内的元素进行点击或按键操作。同时重复实例化也会导致组件状态混乱，无法正常通过data属性控制模态框。

解决方案 #

1. 修改Component代码（复用Modal实例） #

使用Angular的ViewChild获取模态框元素，仅初始化一次Modal实例，避免重复创建：

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

@Component({
  // 你的组件元数据（选择器、模板路径等）
})
export class YourComponent implements OnInit {
  @ViewChild('filtroModal') filtroModal!: ElementRef;
  formModal!: Modal;

  ngOnInit(): void {
    // 在组件初始化时创建唯一的Modal实例
    this.formModal = new Modal(this.filtroModal.nativeElement);
  }

  fecharModal() {
    // 使用hide()明确关闭模态框，避免toggle()的状态混乱
    this.formModal.hide();
  }

  abrirModal() {
    this.formModal.show();
  }
}

2. 修改HTML模板（添加模板引用） #

给模态框元素添加模板引用变量，配合ViewChild获取DOM元素：

<button type="button" class="btn btn-secondary m-3" (click)="abrirModal()">Filtros</button>
<button type="button" class="btn btn-secondary" (click)="resetaPesquisa()">Limpar Pesquisa</button>
</form>

<!-- 添加#filtroModal模板引用 -->
<div #filtroModal class="modal fade" id="filtro">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Selecione os Filtros</h2>
      </div>
      <div class="modal-body">
        <form [formGroup]="filtroForm" class="mx-2">
          <div class="input-group mb-3">
            <label class="input-group-text">Comarca</label>
            <select class="form-select" formControlName="comarca">
              <option *ngFor="let comarca of comarcas" [value]="comarca">
                {{comarca}}
              </option>
            </select>
          </div>
          <div class="input-group mb-3">
            <label class="input-group-text">Vara</label>
            <select class="form-select" formControlName="vara">
              <option *ngFor="let vara of varas" [value]="vara">
                {{vara}}
              </option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="filtrar(filtroForm.value)">Filtrar</button>
        <button type="button" class="btn btn-secondary" (click)="fecharModal()">Fechar</button>
      </div>
    </div>
  </div>
</div>

额外排查点 #

如果修改后仍有问题，可检查以下内容：

• 确认Bootstrap的CSS和JS文件已正确引入，确保模态框的z-index高于遮罩层
• 检查模态框所在的父容器是否设置了overflow: hidden或异常的z-index属性，导致模态框被遮挡

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