已引入相关脚本与CSS,Bootstrap Modal弹窗仍无法正常工作
Bootstrap 5 Modal无法正常触发的修复方案
你的代码核心问题是混用了Bootstrap 4和Bootstrap 5的语法——你引入的是Bootstrap 5.2.0,但用的是Bootstrap 4的data属性规则,这导致弹窗的触发逻辑完全失效。需要修改以下几处:
- 触发按钮的属性:
data-toggle→data-bs-toggle,data-target→data-bs-target - 模态框内关闭按钮的属性:
data-dismiss→data-bs-dismiss - 移除冗余的
role="dialog"和role="document"属性(Bootstrap 5已不再依赖这些旧的语义化标记) - 可选优化:Bootstrap 5的
bootstrap.bundle.min.js已包含Popper.js,且不再强制依赖jQuery,可移除单独引入的Popper和jQuery文件
修正后的完整代码:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Test </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.bundle.min.js" integrity="sha512-9GacT4119eY3AcosfWtHMsT5JyZudrexyEVzTBWV3viP/YfB9e2pEy3N7WXL3SV6ASXpTU0vzzSxsbfsuUH4sQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </body> </html>
内容的提问来源于stack exchange,提问作者Mugen
相关产品推荐
相关产品推荐

