Ember.js中Bootstrap 5模态框隐藏异常问题求助

你的问题核心是手动删除Bootstrap模态框背景层破坏了其内部状态管理，导致第二次打开模态框时DOM与实例状态不一致，只显示背景层。另外重复出现的背景层，大多是因为模态框被重复初始化或未正确销毁实例。

修复步骤： #

1. 移除手动操作背景层的代码

Bootstrap的hide()方法本身会自动处理模态框和背景层的过渡、销毁逻辑，不需要手动删除元素：

import * as bootstrap from 'bootstrap';

export function hideModal(modalId) {
  const modalElement = document.getElementById(modalId);
  const myModal = bootstrap.Modal.getInstance(modalElement);
  if (myModal) { // 增加实例存在判断，避免报错
    myModal.hide();
  }
}

2. 在Ember组件内统一管理模态框实例

避免每次调用getInstance的不确定性，直接在组件内部保存模态框实例，确保只初始化一次：

// 在EditNoteForm组件中添加
@tracked modalInstance;

constructor() {
  super(...arguments);
  // ...原有初始化代码
  this.initializeModal();
}

initializeModal() {
  const modalElement = document.getElementById('editNoteModal');
  // 检查是否已有实例，避免重复初始化
  const existingInstance = bootstrap.Modal.getInstance(modalElement);
  this.modalInstance = existingInstance || new bootstrap.Modal(modalElement);
}

3. 修改表单提交后的隐藏逻辑

直接调用组件内保存的模态框实例的hide()方法：

@action
async submitForm(event) {
  event.preventDefault();

  // ...原有表单提交与保存逻辑
  
  await note.save();

  this.modalInstance.hide(); // 直接使用组件内的实例
  this.messages.add("Note edited!", "success");
}

4. 可选：监听模态框关闭事件重置表单

如果需要在模态框关闭后恢复表单初始值，可以添加事件监听：

initializeModal() {
  const modalElement = document.getElementById('editNoteModal');
  const existingInstance = bootstrap.Modal.getInstance(modalElement);
  this.modalInstance = existingInstance || new bootstrap.Modal(modalElement);

  // 监听模态框完全关闭事件，重置表单
  modalElement.addEventListener('hidden.bs.modal', () => {
    this.titleValue = this.note.title;
    this.contentValue = this.note.raw_content;
    this.yearValue = this.note.year;
    this.subjectIdValue = this.note.belongsTo('subject').id();
  });
}

最终组件关键代码片段 #

export default class EditNoteForm extends Component {
  @tracked titleValue;
  @tracked contentValue;
  @tracked yearValue;
  @tracked subjectIdValue;
  @tracked modalInstance; // 新增：保存模态框实例

  @service store;
  @service router;
  @service messages;

  year_list = [/* ...原有年份选项 */]
  @tracked subjects_list = []

  constructor() {
    super(...arguments);
    this.getAllSubjects();
    this.subjectIdValue = this.note.belongsTo('subject').id();
    this.titleValue = this.note.title;
    this.contentValue = this.note.raw_content;
    this.yearValue = this.note.year;
    this.initializeModal(); // 初始化模态框
  }

  initializeModal() {
    const modalElement = document.getElementById('editNoteModal');
    const existingInstance = bootstrap.Modal.getInstance(modalElement);
    this.modalInstance = existingInstance || new bootstrap.Modal(modalElement);

    modalElement.addEventListener('hidden.bs.modal', () => {
      // 重置表单数据
      this.titleValue = this.note.title;
      this.contentValue = this.note.raw_content;
      this.yearValue = this.note.year;
      this.subjectIdValue = this.note.belongsTo('subject').id();
    });
  }

  // ...原有getAllSubjects、note getter等方法

  @action
  async submitForm(event) {
    event.preventDefault();

    const note = this.store.peekRecord('note', this.note.id) || await this.store.findRecord('note', this.note.id);
    note.title = this.titleValue;
    note.raw_content = this.contentValue;
    note.year = this.yearValue;
    const subject = this.store.peekRecord('subject', this.subjectIdValue) || await this.store.findRecord('subject', this.subjectIdValue);
    note.subject = subject;

    await note.save();

    this.modalInstance.hide();
    this.messages.add("Note edited!", "success");
  }

  // ...模板部分保持不变
}

通过以上修改，Bootstrap会完全接管模态框的状态与DOM管理，既解决第二次打开模态框只显示背景的问题，也能避免重复出现背景层的情况。

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