从Bootstrap4升级为Bootstrap5后点击关闭按钮无法关闭模态框求助

解决思路 #

• 替换关闭按钮的触发属性
  Bootstrap 5将所有内置数据属性的前缀从data-调整为data-bs-，v4版本可用的data-dismiss="modal"在v5中已失效，需要修改为data-bs-dismiss="modal"。首先补全你未闭合的关闭按钮标签，加上对应属性即可：

<input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" data-bs-dismiss="modal">

如果你的关闭按钮是放在Ajax返回的动态内容中，需要修改服务端返回的模板代码，给按钮加上上述属性。

• 调整脚本加载顺序
  如果仍要使用jQuery调用modal()方法控制模态框，必须保证加载顺序为「先加载jQuery，再加载bootstrap.bundle.min.js」，顺序错误会导致jQuery的模态框扩展方法绑定失败。

• 改用Bootstrap 5原生API控制模态框（更稳定）
  Bootstrap 5默认不依赖jQuery，用原生JS API控制模态框可以避免兼容问题，修改后的逻辑如下：

// 全局存储模态框实例，避免重复初始化
let userModal = null;
function get_user_details(user_id)
{
    parameters="user_id="+user_id;
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('hungry/get_modal_view_tree_member_data'); ?>",
        data: parameters,
        cache: false,
        success:function(data)
        {
            $("#UserModalContent").html(data);
            // 实例不存在则先初始化
            if(!userModal) {
                userModal = new bootstrap.Modal(document.getElementById('MyPopup'));
                // 绑定关闭按钮事件，双重保障
                document.getElementById('btnClosePopup').addEventListener('click', () => {
                    userModal.hide();
                })
            }
            userModal.show();
        }
    });
}

• 补全模态框的标准属性
  Bootstrap 5对模态框结构校验更严格，给外层模态框容器补充标准属性避免功能异常：

<div id="MyPopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">

内容的提问来源于stack exchange，提问作者Eng Keat Ang