Bootstrap5.1下使用原生JavaScript动态创建模态框报错如何解决

错误原因 #

你的代码有两个核心问题导致报错：

1. 实例化bootstrap.Modal时参数错误：你把未声明的myModal作为第一个参数传入了，应该传入你之前创建的DOM元素变量modal
2. 动态生成的模态框元素没有挂载到页面DOM树上，Bootstrap 5的模态框实例化要求目标元素必须已经存在于当前文档的DOM中，否则无法读取元素属性触发报错。

修正后的完整实现 #

function showTheForm() {
    // 1. 创建模态框根元素
    const modal = document.createElement('div');
    modal.id = 'rescheduleEmployeeModal';
    modal.className = 'modal fade'; // 加上fade类实现动画效果，和原jQuery版本逻辑一致
    modal.setAttribute('tabindex', '-1');
    modal.setAttribute('role', 'dialog');
    modal.innerHTML = `
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button id="confirm_reschedule" type="button" class="btn btn-primary">Reschedule</button>
                </div>
            </div>
        </div>
    `;

    // 2. 先把模态框挂载到body，必须在实例化之前执行
    document.body.appendChild(modal);

    // 3. 实例化模态框
    const myModal = new bootstrap.Modal(modal, {
        backdrop: 'static',
        keyboard: false,
        focus: true,
        show: true
    });

    // 4. 绑定事件，对应原jQuery版本的逻辑
    modal.addEventListener('shown.bs.modal', (e) => {
        // 模态框显示后的操作，直接操作modal元素即可
    });

    modal.addEventListener('hidden.bs.modal', (e) => {
        // 隐藏后自动销毁实例+移除DOM元素，实现自清理
        myModal.dispose();
        modal.remove();
    });

    modal.querySelector('#confirm_reschedule').addEventListener('click', (e) => {
        // 确认按钮点击逻辑
    });

    // 后续需要获取实例可以直接用官方方法：
    // const getModalInstance = bootstrap.Modal.getInstance(document.getElementById('rescheduleEmployeeModal'))
}

// 调用显示
showTheForm();

关键注意事项 #

• 所有Bootstrap 5的JS组件实例化之前，目标元素必须已经插入到DOM树中，否则都会出现类似属性读取失败的报错
• 要使用bootstrap.Modal.getInstance()方法，只需要保证你查询的DOM元素是已经挂载到页面上且已经实例化过模态框的即可，不需要提前写在HTML模板里
• 模态框关闭后调用dispose()方法销毁实例，再移除DOM元素，避免内存残留。

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