Bootstrap 5 Modal 不显示？关键在于更新 data 属性前缀

bootstrap 5 移除了 jquery 依赖并统一使用 `data-bs-*` 前缀替代旧版的 `data-toggle` 和 `data-target`，若未更新属性名，modal 将完全失效。

在 bootstrap 5 中，所有 javaScript 触发的 data 属性均已标准化为 data-bs-* 命名格式。你遇到的 Modal 不弹出问题，根本原因正是 html 中仍沿用了 Bootstrap 4 的 data-toggle=”modal” 和 data-target=”#exampleModalCenter” —— 这些在 Bootstrap 5 中已被废弃，浏览器会直接忽略，导致事件绑定失败。

✅ 正确写法（Bootstrap 5）：

   Doesn't have an account yet?    Create an account 
  
   
     
       
         
Create Your Account
                
       
                  
           
             Email address                        
         
       
       
         Cancel         Sign up       
     
   
 

⚠️ 注意事项：

• 确保已正确引入 Bootstrap 5 的 css 和 js 文件（推荐使用 cdn）：

• data-bs-dismiss=”modal” 同样需用于关闭按钮，不可写作 data-dismiss；
• Modal 必须置于 级别（不能嵌套在 display: none 或 visibility: hidden 的父容器中），否则初始化失败；
• 若通过 javascript 手动调用，应使用 new bootstrap.Modal(…) 实例化，而非 $(‘#myModal’).modal(‘show’)（jquery 方式已不支持）。

总结：从 Bootstrap 4 升级到 5 时，务必全局搜索替换 data-toggle → data-bs-toggle、data-target → data-bs-target、data-dismiss → data-bs-dismiss，这是 Modal、Collapse、Tooltip 等组件正常工作的前提。